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.


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -