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:

Zoom Image CSS demo
Zoom Image CSS demo
Card title

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

Go somewhere

1. Add your image.

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

Set max-width to 100%.

img {
  max-width: 50%;
}

Output:

Zoom Image CSS step 1

2. Use the transform scale property on image hover.

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

Output:

Zoom Image CSS step 2

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:

Zoom Image CSS step 3

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

img {
  transition: all 1s;
}

Output:

Zoom Image CSS step 4

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:

Zoom Image CSS step 5
Card title

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

Go somewhere


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.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x