CSS Almanac | CSS-Tricks

contrast() | CSS-Tricks
▻https://css-tricks.com/almanac/functions/c/contrast

Making product card images pop on hover

Another useful application for contrast() is to highlight an image in a user’s interaction. For example, in a row of image cards, we could increase the image’s contrast and also scale it on hover

.card img {
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.card:hover img {
  filter: contrast(125%);
  transform: scale(1.05);
}

#css #contrast #effet #hover

touch-action
▻https://css-tricks.com/almanac/properties/t/touch-action

The touch-action property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch screen, touch-action will come in handy.

[…]

By default, a browser will handle touch interactions automatically: Pinch to zoom, swipe to scroll, etc. Setting touch-action to none will disable all browser handling of these events, leaving them up to you to implement (via JavaScript). If you only want to take over one interaction, tell the browser to handle the rest. For example, if you wrote some JavaScript that only handles zooming, you can tell the browser to handle everything else with this property: touch-action: pan-x pan-y;.