CSS3鼠标悬浮图片缩小出现文
分类：实例代码
分享一段代码实例，它实现了当鼠标悬浮在div块之上，div里面的图片会出现缩小效果，并且会出现文字说明。
有需要的朋友可以做一下简单的参考。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.carre_couleur{
width:200px;
height:200px;
display:inline-block;
position:relative;
margin-top:0px;
}
.base_hov .retract{
transition:all 200ms ease-in;
transform-origin:50% 20%;
transform:scale(1);
width:200px;
height:200px;
position:absolute;
z-index:2;
left:0;
}
.base_hov:hover .retract{
transition:all 200ms ease-in;
transform:scale(0.6);
}
.acced{
width:180px;
padding:10px;
bottom:0;
position:absolute;
z-index:1;
text-align:left;
}
.big_acced{
color:#ffffff;
font-size:25px;
font-weight:400;
}
.middle_acced{
color:#ffffff;
font-size:15px;
font-weight:400;
}
</style>
</head>
<body>
<div align="center">
<div class="carre_couleur base_hov" style="background-color:#f8b334;">
<div class="retract" style="background-color:#f8b334;">
<img src="images/alt.jpg">
</div>
<div class="acced">
<div class="big_acced" style="color:#f39c12;">前端教程网</div>
<div class="middle_acced">分享的精神和互助的胸怀是进步最大源动力</div>
</div>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，当然图片路径当前有误，可以将代码复制到本地进行测试。