鼠標移過圖片變高亮

前言：自從寫博客開始，此次快一個月沒有更博了，說忙也不是由於忙，無論怎麼，今天總算是又開始了。最近在寫一個項目，因此又學到一些小特效，今天就簡單的總結下。咱們平時進入一個網站，掃過一個圖片有時就會看到，圖片出現文字，而後圖片變得灰暗，或者圖片變得高亮。兩個其實都是一個原理，咱們能夠用透明度opacity和層級z-index，這兩個屬性來設置。

---

一。實現過程：
（1）定義一個大的div，在裏面包含一個div和一個img
（2）將小div設置爲絕對定位，img爲相對定位
（3）讓img的大小爲100%，即大div的大小，小div的大小與img相等
（4）給小div加上背景色，開始透明度爲本身設置一個0到1之間的數便可，當鼠標掃過期透明度設爲0，即徹底透明

二。代碼以下：
（1）html代碼：

<div class="card">
    <div class="before"></div>
    <img src="images/6.jpg">
</div>

（2）主要的css代碼：

.card
{ height:200px; margin:0 auto; width:230px; }

.card:hover
{ cursor:pointer; }

.card img
{ height:200px; width:100%; }


.before
{ height:200px; width:230px; position:absolute; z-index:999; background:#282f44; opacity: 0.3; }

.before:hover
{ background:#282f44; opacity: 0; }

三。效果如圖：

---

以上實現的過程很簡單，若是要改變圖片的大小或者是在圖片上加文字，都是這個思路，在鼠標掃過圖片時，改變圖片的大小，或顯示原來隱藏的div便可，若是有更好的辦法，歡迎來提意見。