將鼠標懸停在圖像效果上：shadow

Question

我想在圖像懸停後添加陰影以顯示哪個圖像被突出顯示。我不確定在CSS中使用什麼代碼來實現這種效果。我嘗試使用moz-box-shadow命令，但我不太確定它是否正確。下面

是我的代碼：

<section class="pictures"> 
     <div class="container"> 
      <div class="row1"> 
       <div id="first" class="img1"> <a href="/img1"> <img src="images/page-1_img1.jpg"></a> 
       </div> 
       <div id="second" class="img2"> <a href="/img2"><img src="images/page-1_img2.jpg"></a> 
       </div> 
      </div> 
      <div class="row2"> 
       <div id="third" class="img3"> <a href="/img3"><img src="images/page-1_img3.jpg"></a> 
       </div> 
       <div id="fourth" class="img4"> <a href="/img4"><img src="images/page-1_img4.jpg"></a> 
       </div> 
       <div id="fifth" class="img5"> <a href="/img5"><img src="images/page-1_img5.jpg"></a> 
       </div> 
      </div> 
     </div> 
    </section> 

CSS：

/圖片/

.container { 
    padding-top: 100px; 
} 

.row1 { 
    display:inline; 
} 
.img1{ 
    float:left; 
    padding-left: 20px; 
} 
.img2{ 
    float: right; 
    padding-right: 60px; 
} 

.row2{ 
    display:inline; 

} 
.img3{ 
    float:left; 
    padding-left: 20px; 
    padding-top: 20px; 

} 
.img4{ 

display: inline-block; 
padding-top: 20px; 
padding-left: 30px; 

} 

.img5{ 

    display: inline-block; 
    padding-right: 20px; 
    padding-left:20px; 
} 

.container a:hover{ 
    -moz-box-shadow: #000000; 
    -webkit-box-shadow: #000000; 
    box-shadow: #000000; 
} 

謝謝。

Answer 1

您的盒子陰影語法是錯誤的。這應該適合你。

.container a:hover{ 
    box-shadow: 10px 10px 5px #000000; 
    -moz-box-shadow: 0px 10px 5px #000000; 
-webkit-box-shadow: 0px 10px 5px #000000;  

}

Answer 2

你還可以添加CSS和嘗試..

img:hover{ 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
    box-shadow: 10px 10px 5px #888888; 
}