Menu
I want to zoom image with only CSS. The code below zooms the image when the left button of the mouse is kept pressed but I want to zoom in and out with a mouse click. How can I achieve that?
.container img { transition: transform 0.25s ease; cursor: zoom-in; } .container img:active { -webkit-transform: scale(2); transform: scale(2); cursor: zoom-out; } 
986
We need a container element which will be hovered and then the image inside it should animate accordingly, i.e. zoom-in or zoom-out as per the need. Note that the image should zoom on hover inside the container element and do not come or flow outside of it when it gets zoomed.
The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn't recommended for production sites. .zoom { zoom: 150%; }
Let's use a trick here, an input checkbox:
input[type=checkbox] { display: none; } .container img { margin: 100px; transition: transform 0.25s ease; cursor: zoom-in; } input[type=checkbox]:checked ~ label > img { transform: scale(2); cursor: zoom-out; }<div class="container"> <input type="checkbox" id="zoomCheck"> <label for="zoomCheck"> <img src="https://via.placeholder.com/200"> </label> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
