html - Zoom images smoothly with CSS -
i have picture, want zoom if users move mouse on it. currently, not happen smoothly.
example:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>zoom</title> <style> .zoom:hover { zoom: 1.5; } </style> </head> <body> <p><img src="images/image.png" class="zoom"></p> </body> </html>
use transform
smooth zoom:
.zoom { transition: transform 1s; }
but should change scale
instead of zoom (thanks @val):
.zoom:hover { transform: scale(2); }
i created fiddle, you.