CSS-实战-交互式图片-CSDN博客

1、实现效果

当鼠标经过图片，图片会逐渐放大，仿佛你距离图片越来越近,常在旅游、商品的展示页面应用。

2、实现思路

（1）使用 scale 函数放大图片
（2）使用transition实现逐渐变化的动画。
（3）使用 overflow: hidden; 控制图片在图片外围盒子中。

3、源代码

素材：
图片一张

bl.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实战-鼠标经过动画</title>
    <style type="text/css">
        .photo {
            overflow: hidden;
            position: relative;
            width:290px; 
            height:376px; 
            float:left;
        }
        .photo img{ 
            width:100%; 
            height:auto;
        }
        .photo:hover img{
            -webkit-transform:scale(1.15);
            -moz-transform:scale(1.15);
            -o-transform:scale(1.15);
            transform:scale(1.15);
            -webkit-transition:all 2s ease;
            -moz-transition:all 2s ease;
            -o-transition:all 2s ease;
            transition:all 2s ease;
        }
    </style>
</head>
<body>
    <div class="photo">
        <!--博客bug，需要调整下面一行代码-->
         < img src="bl.jpg " border="0" >
    </div>       
</body>
</html>