请您看一下这个演示,让我知道为什么背景透明度在
上无法正常运行 .figure .caption-mask:hover {
background: rgba(0, 0, 0, 0.0);
}
正如您所看到的那样,我试图在.caption-mask
上移除.figure
时的不透明度,但它无法正常运行。请尝试将鼠标悬停在.figure
的所有边上,以查看不同的结果。
.figure {
position: relative;
overflow: hidden;
display: inline-block;
}
.figure .caption-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out;
background: rgba(0, 0, 0, 0.4);
}
.figure .caption-mask:hover {
background: rgba(0, 0, 0, 0.0);
}
.caption {
position: absolute;
top: 20%;
left: 0;
width: 100%;
}
.caption h3 {
margin-bottom: 60px;
}
.figure img {
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.figure:hover img {
overflow: hidden !important;
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 text-center">
<div class="thumbnail">
<div class="figure">
<img src="https://tsicloud.com/wp-content/uploads/2017/06/cloud.jpg" class="img-responsive" alt="...">
<div class="caption-mask"></div>
<div class="caption">
<h3>Test</h3>
<p><a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
&#13;
答案 0 :(得分:3)
更改
.figure .caption-mask:hover
到
.figure:hover .caption-mask
.figure {
position: relative;
overflow: hidden;
display: inline-block;
}
.figure .caption-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out;
background: rgba(0, 0, 0, 0.4);
}
.figure:hover .caption-mask {
background: rgba(0, 0, 0, 0.0);
}
.caption {
position: absolute;
top: 20%;
left: 0;
width: 100%;
}
.caption h3 {
margin-bottom: 60px;
}
.figure img {
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.figure:hover img {
overflow: hidden !important;
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 text-center">
<div class="thumbnail">
<div class="figure">
<img src="https://tsicloud.com/wp-content/uploads/2017/06/cloud.jpg" class="img-responsive" alt="...">
<div class="caption-mask"></div>
<div class="caption">
<h3>Test</h3>
<p><a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</div>
</div>