How to create zoom in in CSS

<!--DOCTYPE html--> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .image-wrap { width: 200px; height: 200px; position: relative; overflow: hidden; } .image-wrap img { top: -50px; left: -150px; height: 400px; width: 400px; transition: all 500ms ease-in; position: absolute; } .image-wrap img:hover { top: 0; left: 0; height: 200px; width: 200px; } </style> <div class="image-wrap"> <img alt="" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sYpE1ydRTVwzMgHRLooeLl2jyGzotPiH_0fz04l4peYB1SIwINn29Hc5QjTwmRHX16Q6OgPCiHLSZ6f7lWOwI-vkGuZLJqUWgwFHuwtvqFmpIfaUHazpUmanamqiy7t0SWWR4iG3GG-D-XnasEPy3iP9VYqT5g-nKuiF4QYud06ocYFGl4mb-b=s0-d"> </div> </body> </html>

agyanadda

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 $type={blogger}:

Post a Comment