How to add product image zoom on hover using html and css

We can add product image zoom on hover using html and css and it can be responsive

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;   
 } 

Html code

<div class=”row”>

<div class=”Product-block col-md-4″>

<a href=”>

<h3>precision praka jacket</h3>

<h2>jackets</h2>

<h4<color=”product-image”>

<img src=”” class=”zoomover”>

</div>

</a>

</div>

<div class=”product-block col-md-4″>

<a href=” “>

<h3>rommerandamp;seekers</h3>

<h2>sumit praka javket</h2>

<h4>color:green</h4>

<div class=”product-image”>

<image src=” ” class=”zoomover”>

</div>

</a>

</div>