Zoom effect on hover
Add a simple zoom effect on hover for your images with a small code
- No extra element (only the
<img>tag) - 5 CSS declarations
img {
--f: 1.15; /* the scale factor */
clip-path: inset(0);
transition: .4s;
}
img:hover {
clip-path: inset(calc((1 - 1/var(--f)) * 50%));
scale: var(--f)
}See the Pen Zoom effect on hover (single element) by Temani Afif (@t_afif) on CodePen.
More detail: verpex.com/blog/website-tips/css-effects-on-images-ii
More CSS Tips
- A reveal hover effect using CSS mask II Use CSS mask to create a nice reveal effect on hover.
- A reveal hover effect using CSS mask Use CSS mask to create a nice reveal effect on hover.
- Overlapping border on images with hover effect Add an overlapping border to your image with cool hover effect.
- 3D trailing shadows for images A simple trick to add a 3D shadow to your images.