Zoom Image CSS

Here’s how you can add a zoom hover effect to an image in a card or any image using CSS.

Final Output:

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

HTML:

<div class="img-wrapper">
    <img src="https://codingyaar.com/wp-content/uploads/card-image.jpg" alt="">
</div>

CSS:

img {
  max-width: 100%;
  transition: all 1s;
}
.img-wrapper {
  overflow: hidden;
}
img:hover {
  transform: scale(1.1);
}

Recently added:

Leave a Reply

Your email address will not be published. Required fields are marked *

YouTube
YouTube
WhatsApp
Pinterest
fb-share-icon
Instagram