Preferisco sfruttare la proprietà transform di CSS3
HTML
CSS
HTML
HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="http://pm1.narvii.com/5851/8c77490401936349e1efa892849726eb70824108_hq.jpg" alt = "Hikigaya" />
<h3> Passa il mouse su questo esemplare di Hikigaya per zoomare </h3>
</body>
</html>
CSS
HTML:
img
{
width: 350px;
height: 300px;
display: block;
margin: 150px auto;
transition: all, 1s, ease-in-out;
}
img:hover
{
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
box-shadow: 10px 10px 50px #000;
}
h3
{
text-align: center;
margin: 0;
padding: 0;
font-family: arial;
}