将鼠标悬停在图像效果上：阴影

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

您也可以添加CSS并尝试。

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

Answer 2

您对框阴影的语法是错误的。 这应该为您工作。

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

}