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

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

QPainter::strokePath(yourpath, yourpen)

}

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

2 个答案: