CSS製作滑鼠移動到圖片上圖片會放大的效果

CSS製作滑鼠移動到圖片上圖片會放大的效果

近期發現很多自架的部落格網站,當滑鼠移動到文章的特色圖片時會有圖片放大的效果

要怎麼做到呢?以下是範例參考:

<style type="text/css">

/*自動隱藏超出長寬的圖片*/
.post  {
overflow: hidden;
width: 800px;
height: 600px;
}

/*轉場的時間*/
.post img {
transition: all 0.5s ease 0s;
}

/*判斷滑鼠的動作放大圖片還有增加透明度*/
.post img:hover {
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: .5;
}
</style>

 

<div class="post">
<img src="圖片網址" width="800" height="600" alt=""/>
</div>

與大家分享...
CSS製作滑鼠移動到圖片上圖片會放大的效果
Facebook
0CSS製作滑鼠移動到圖片上圖片會放大的效果
Google+
0CSS製作滑鼠移動到圖片上圖片會放大的效果
Pinterest
0CSS製作滑鼠移動到圖片上圖片會放大的效果
email
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *