Search code examples
jqueryimagehoverzooming

Making zoom on hover jquery

I want to know if there is a way with jquery to make the zoom effects like on this page http://chobanifoodservice.com/ As you can see, the image doesn't change its size, it zooms it while staying in the same size. Thanks in advance

Solution

  • You can accomplish this in CSS quite well. Doing this only in jQuery becomes a lot more messy (in my opinion).

    .zoom {
  display:inline-block;
  overflow:hidden;
  border:1px solid black;
}

.zoom img {
  transition:.1s ease-in-out;
}

.zoom:hover img {  
  transform: scale(1.05);
}
    <div class="zoom">
  <img src="http://neil.computer/stack/food.jpg" />
</div>