CSS3滑鼠懸浮圖片縮小出現文

admin發表於2018-07-20
CSSS3
分享一段程式碼例項，它實現了當滑鼠懸浮在div塊之上，div裡面的圖片會出現縮小效果，並且會出現文字說明。

有需要的朋友可以做一下簡單的參考。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

上面的程式碼實現了我們的要求，當然圖片路徑當前有誤，可以將程式碼複製到本地進行測試。

相關文章