Product Image Zoom On Hover Using HTML and CSS Only

Hello everyone! Welcome to Codewithrandom. Today we will create a Product Image Zoom On Hover Using Html and Css.In this Project, we see that when we move the cursor to the Product Image it will Zoom When Hover.

Product Image Zoom On Hover

HTML Code:-

<div class="row">
            
<div class="product-block col-md-4">
    <a href="https://www.roamersandseekers.co.uk/shop/outerwear/precision-olive-green-quilted-parka-jacket.html">
    <h3>Roamers &amp; Seekers</h3>
        <h2>PRECISION Parka Jacket</h2>
        <h4>Color: Military Olive</h4>
        <div class="product-image">
        <img src="https://i.ebayimg.com/images/g/tCcAAOSw9wVfqAyC/s-l500.jpg" class="zoomover">
    </div>
    </a>
</div>


<div class="product-block col-md-4">
    <a href="https://www.roamersandseekers.co.uk/shop/outerwear/summit-checked-parka-jacket.html">
    <h3>Roamers &amp; Seekers</h3>
        <h2>SUMMIT Parka Jacket</h2>
        <h4>Color: Military Olive/Barolo Check</h4>
    <div class="product-image">
        <img src="https://aritzia.scene7.com/is/image/Aritzia/f22_03_a03_90864_27419_off_a?wid=1800" class="zoomover">
    </div>
    </a>
</div>
</div>

We will build a container for our image using the div element with class row, and then we will use the div tag inside of that container to create two div sections inside of one section. The heading will be added to our image using the h3> tag selector, and the url will be added using the image tag attribute.

Similar to the product block section, we will construct another section where we will add the text structure using the h3 tag along with the h2 and h4 tag selectors and then add the image for our project using the image tag.

HTML Output:-

CSS Code:-

@import url('https://fonts.googleapis.com/css?family=Oswald');

body { font-family: 'Oswald', sans-serif; background-color: #231f20;}

a { color: #e7e7e7; }
a:hover { color: #f9e537; text-decoration: none; }

img { max-width: 100%; }

.product-image { 
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.product-image > img { 
  transition: all .3s ease-in-out; 
}

.product-block > a:hover .product-image > img { 
  transform: scale(1.25); 
}

Restaurant Website Using HTML and CSS

CSS Output:-

Video Output: