純CSS圖片縮放後顯示詳細信息

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

    如今不少圖片縮放的特效大多數都是用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作了個動畫）。好了，休息了！