Card Zoom Image CSS

Follow the steps to add a zoom image hover effect using CSS to an image or in a Bootstrap card or any card.

Final Output:

---

1. Add your image.

<img src="..." alt="">

Set max-width to 100%.

img {
  max-width: 50%;
}

Output:

2. Use the transform scale property on image hover.

img:hover {
  transform: scale(1.1);
}

Output:

3. To avoid the image overlapping with other elements, wrap it in a div.

<div class="img-wrapper">
  <img src="..." alt="">
</div>

Set a width and its overflow to hidden.

.img-wrapper {
  width:50%
  overflow: hidden;
}
img {
  max-width: 100%;
}

Output:

4. To get a smooth animation effect, let’s use a transition.

img {
  transition: all 1s;
}

Output:

5. You can use the zoom effect for image in a card as well.

<div class="card" style="width: 18rem;">
  <div class="img-wrapper">
    <img src="..." alt="">
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
      content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Output:

---

Final Output Code for Zoom Image CSS:

HTML:

<div class="img-wrapper">
    <img src="..." alt="">
</div>

CSS:

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

Video explanation for Zoom Image CSS:

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.