? ? 哎~！突然好久沒更新博客了，最近總在下雨，晚上也經常沒有時間來管理博客（目前在敲自己的一個平臺，晢時還在寫邏輯層的代碼），好吧！廢話不多說了，言歸正傳。

? ? 現在很多圖片縮放的特效大多數都是用javascript來寫的，當然了，其實還可以使用CSS來寫。下邊圖片是效果觸發前和觸發后的圖片。

　　? ? ? ? ? ? ? ? ?

（觸發前）?

? ?

（觸發后）

?

實現原理很簡單，先看HTML代碼：

1 <div class="view view-first"> 2 <a target="_blank" href="#" class="new-product-image"><img src="images/china.jpg"></a> 3 <div class="mask"> 4 <h4 class="title"><a title="中國茶城" class="text-hide" target="_blank" href="#">中國茶城</a></h4> 5 <p class="text">云南普洱，2003年5月普洱被中國茶葉流通協會命名為“中國茶城”，普洱茶成為普洱走向全國乃至世界的一張標志性名片。</p> 6 </div> 7 </div>

另外是CSS：

.view-first{position:relative;} .view-first img{-webkit-transition:all .2s ease-in; -moz-transition:all .2s ease-in; -o-transition:all .2s ease-in; -ms-transition:all .2s ease-in; transition:all .2s ease-in;} div.mask-hover img, .view:hover img{width:100px; height:100px;} .view{position:relative; text-align:center; cursor:default; width:190px; height:238px; margin-left:auto; margin-right:auto; overflow:hidden;} .view .mask{width:160px; overflow:hidden; margin:0 auto;} .view .title{text-align:center; position:relative; font-size:12px; margin-top:16px; height:20px; line-height:20px;} .view .title a{ color:#666; text-decoration:none;} .view .text{position:relative; text-align:left; font:normal 12px/16px '宋體'; color:#999;}

?好了！這樣就大功造成了！但是因為高度值是固定值的，如果用在實際項目中可能會引起一些問題，不過這也算是使用純CSS編寫的缺點，如果能有更好的解決方案！我相信目前只能用jQuery或者Javascript來寫，當然了，現在CSS3已經強大到可以做動畫了（國外聽說已經有牛人使用純CSS3做了個動畫）。好了，休息了！

轉載于:https://www.cnblogs.com/yuanusihif/p/3393296.html

總結

以上是生活随笔為你收集整理的纯CSS图片缩放后显示详细信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。