悬停在图像效果上：阴影答案

【问题标题】：hover over image effect: shadow悬停在图像效果上：阴影
【发布时间】：2017-04-23 20:42:22
【问题描述】：

我想在悬停时在图像后面添加阴影以显示突出显示的图像。我不确定在 CSS 中使用什么代码来产生这种效果。我尝试使用moz-box-shadowcommand，但我不太确定它是否正确。

以下是我的代码：

<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;
}

谢谢。

【问题讨论】：

Google 怎么说 CSS 框阴影？
谷歌确实有答案:)

标签： css html

【解决方案1】：

你也可以加css试试看..

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

【讨论】：

【解决方案2】：

你的盒子阴影语法是错误的。这应该适合你。

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

}

【讨论】：