我在尝试模糊图像时遇到问题CSS在我的网页上：受影响图像上方呈现的任何元素都将在该过程期间和之后隐藏。我该如何解决这个问题？
有关问题本身的更多信息，我发布了一个片段，其中包含一个具有该确切问题的示例。
.placeholder {
display: block;
/* Align the content within the container near the center. */
text-align: center;
/* Calculate both the width and height of the element. */
width: calc(100vw / 3);
height: calc(100vw / 3 * 2 / 3);
}
.placeholder img {
display: inline;
/* Fill the entire parent element. */
width: 100%;
height: 100%;
/* Adjust the way the image is fit into the parent. */
object-fit: cover;
/* Add a transition to the element whenever an effect will be applied to it. */
transition: all 0.5s linear;
}
.placeholder > p.article {
display: inline-block;
/* Calculate the desired margin of the element. */
margin: calc(-100vw / 3 * 2 / 3 - 1em) auto 0;
/* Align the element vertically near the middle. */
vertical-align: middle;
/* Adjust the readability of the text. */
color: white;
}
.placeholder:hover img {
/* Blur the image inside the container when the cursor is above it. */
filter: blur(4px);
}
<div class="placeholder">
<img src="http://fennek.mobi/bilder/fennek-3.jpg">
<p class="article">A lazy fennec.</p>
</div>
<p>Copyright © http://fennek.mobi/</p>
Add position: relative to .imageLabel.
body {
margin: 0;
}
.imageFolder {
float: left;
display: block;
width: calc(100vw / 3 - 0px);
height: calc(100vw / 3 * 2 / 3 - 0px);
border: 0px solid #444;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.imageBox {
display: inline;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
}
.imageBox img {
display: inline;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.2s ease-in;
}
.imageLabel {
position: relative;
display: inline-block;
margin: calc(0px - 100vw / 3 * 2 / 3) auto 0;
height: 40px;
line-height: 40px;
font-weight: 700;
font-size: 24px;
padding: 10px 40px;
text-decoration: none;
color: white;
opacity: 0;
text-align: center;
vertical-align: middle;
border: 1px solid white;
}
.imageFolder:hover > .imageBox img {
width: calc(100% + 30px);
height: calc(100% + 20px);
margin: -10px -15px;
transition: all 0.6s ease-out;
filter: blur(4px);
}
.imageFolder:hover > .imageLabel {
opacity: 1;
transition: all 0.6s ease-out;
}
<a href="">
<div class="imageFolder">
<div class="imageBox">
<img src="http://tim.nikischin.com/library/gallery/087_Charlotte/_IMG4015.jpg" alt="">
</div>
<div class="imageLabel">Charlotte</div>
</div>
</a>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
