標籤：margin hid utf-8 過渡效果 style 滑鼠移動 放大 html htm
<!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
滑鼠移動到圖片片逐漸層大、變清晰（帶有過渡效果）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
