鼠標移動到圖片上圖片逐漸變大、變清晰（帶有過渡效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標移動到圖片上圖片逐漸變大、變清晰（帶有過渡效果）</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
filter:alpha(Opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
div img{
cursor: pointer;
transition: all 0.6s;
-moz-transition: all 0.6s; /* 0.6s完成過渡效果 */
-webkit-transition: all 0.6s;
}
div img:hover{
transform: scale(1.2); /* 放大1.2倍 */
}
div:hover{
filter:alpha(Opacity=100);
-moz-opacity:1;
opacity: 1;
}
</style>
</head>
<body>
<div>
<img title="鼠標移上來，我變清晰了，逐漸變大了" src="http://new-img2.ol-img.com/375x375/115/638/liZVVgjbgJHDs.jpg" />
</div>
</body>
</html
鼠標移動到圖片上圖片逐漸變大、變清晰（帶有過渡效果）