But have you tried the Zoom effect before? Like, maybe the Zoom effect using CSS Scale. How’s, was your experience? You may be surprised that there is the much lighter version available which allows you to implement an Image Zoom In Zoom Out On Clicking the image easily.
Over coding isn’t a good practice, and it’s a lot better to go with solutions that work and make sense of use it. Not only this but also have mobile-friendly, right?
Yes, it is built with mobile-first in mind and gives you smooth animations. The limitation still not end, it also offers intuitive gestures.
You may be thinking that we can easily do zoom by using CSS Zoom Property but what about the browser support? Yes, browser support is a major issue we ever had.
A small file comes up with unlimited functions. How unlimited? The file is just 7kb, but it provides a lot of impressive features that look like an unlimited feature.
After that, you need to create the HTML markup. We will simply define a div element with a class name
value-img and then place an image inside it.
Moreover, we will define the data attribute for Zoom and the path to the original image.
<div class="value-img"> <img id="img-default" src="img/journey_start_thumbnail.jpg" data-action="zoom" data-original="img/journey_start.jpg" alt="journey_start_thumbnail" /> </div>
The last step to initialize the plugin and you can easily do by defining the Zooming function.
<script> new Zooming().listen('img') </script>