将鼠标悬停在图像效果上：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; 
}