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>

上面的代码实现了我们的要求,当然图片路径当前有误,可以将代码复制到本地进行测试。

回复

我来回复
  • 暂无回复内容