How To Zoom An Image On Hover in Html

How to zoom an image on hover using in Html is very easy.
A typical example of where this kind of design is been used is a shopping card.
if you have ever taken a good look on how most shopping card behaves, you will notice that once you hover on the card, the image will increase in size and sometimes, the cart icon will appear, asking you to add the item to your cart.
So in this article, we would be exploring how we can increase the size of an image on hover using CSS

Using a simple shopping card as example,

we need an image, price and some text.

Html

<div class="card">
    <div class="image">
        <img src="./IMG_20190701_205015.jpg" alt="">
        <!-- please include your image path here -->
    </div>
    <div class="Price">
        <h4>Price</h4>
        <h4>$20</h4>
    </div>
    <div class="description">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quaerat quos beatae iure, at deleniti similique aliquam aut voluptatem inventore.</p>
    </div>
</div>

Very simple html, next, we will add styling to it.

CSS
body {
  background-color: black;
}
h4 {
  color: red;
}
.card {
  width: 60%;
  margin: 0 auto;
  border: 4px solid orangered;
  border-radius: 8px;
  color: white;
}
.image {
  width: 90%;
  margin: 0 auto;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.image img {
  max-height: 300px;
  width: 100%;
  display: block;
  border-radius: 8px;
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}
.Price {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 0.5rem;
}
.description {
  margin: 0 auto;
  width: 90%;
  margin-bottom: 0.5rem;
}

if you are on google chrome, your browser output should like what’s shown in the picture below.

The only difference should be your image.

The size will not increase when you hover because we have not included that functionality yet.

So to increase the size of the image on hover, we add a few more CSS.

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

after adding that one line of code, we can now increase the size of the image on hover.

The result on my browser is shown below;

so this is the simple way to zoom an image on hover using CSS. you can learn how to add nice overlay to the image

hopefully, you understand how this works, practice it more and implement it in your next project.
click here to learn how to show and hide the cart icon when you hover on the image