Image hover zoom effect using css

Image hover zoom effect using css

Hello friends today in this article i will provide you complete tutorial of Image hover zoom effect using html and css. In this zoom effect image will zoom on mouse hover and zoom overflow will be hidden.

  • Image hover effects codepen
  • Image hover effects CSS
  • Bootstrap image zoom on Hover
  • Zoom effect in css
  • Image hover zoom effect css
  • Zoom in effect css
<div class="img_container">
  <div class="imagezoom">
     <img src="daily.jpg" width="100%" />
  </div>
</div>

<div class="img_container">
  <div class="imagezoom">
    <img src="fixed_deposit.jpg" width="100%" />
  </div>
</div>

<div class="img_container">
  <div class="imagezoom">
     <img src="recurring.jpg" width="100%" />
  </div>
</div>
<style type="text/css">
   
.img_container {
  width: 400px; 
  height: 250px;
  border:1px solid #333;
  overflow:hidden;
  transition:all ease-in-out 0.3s;
  float:left;
  margin-left:10px;
}

.imagezoom {
  width: 100%;
  height: 100%;
  transition:all ease-in-out 0.3s;
  cursor:pointer;
}

.img_container:hover .imagezoom,
.img_container:focus .imagezoom {
  transform: scale(1.2);
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and  only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	
.img_container {
  width: 30%; 
  height:100%;
  border:1px solid #333;
  overflow:hidden;
  transition:all ease-in-out 0.3s;
  float:left;
  margin-left:10px;
}
	
}


</style>

Image hover zoom effect using css