好的,就这样。我有一个问题。
我想要一张悬停时模糊的图片,同时让文字出现在上面。
我找到了一种简单的方法来模糊图像并使文本出现,但不能同时出现;事实上,将这两个代码合并在一起可以使图片看起来一点也不模糊。我认为这是因为文本实际上覆盖了图像,而浏览器没有收到图像悬停的消息。
这里是 the image with text over it这是the image with blur on hover 我该如何解决这个问题?我正在努力,我想我已经找到了另一种方法,但它有点麻烦。
这是一些代码:
h1,p {
margin: 0;
padding: 0;
}
.imgtext {
color: white;
background: rgba(0,0,0,0.89);
width: 155px;
height: 135px;
padding: 50px 15px 0 15px;
opacity: 0;
position: absolute;
bottom: 0px;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.pic {
position: relative;
overflow: hidden;
width: 185px;
height: 185px;
margin: 50px auto;
}
.pic img:hover{
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
transform: scale(1.03);
}
.imgtext:hover {
-webkit-opacity: 100;
opacity: 100;
}
<div class="pic">
<img src="http://nicolacornolti.com/photos/film/img/1.png">
<span class="imgtext">
<h1>THIS IS A TITLE</h1>
<p>and this is a description</p>
</span>
最佳答案
在 .pic
容器元素上使用伪类 :hover
,而不是在每个单独的子元素上。
例如:
.pic .imgtext:hover
到 .pic:hover .imgtext
和
.pic img:hover
到 .pic:hover img
h1,
p {
margin: 0;
padding: 0;
}
.imgtext {
color: white;
background: rgba(0, 0, 0, 0.89);
width: 155px;
height: 135px;
padding: 50px 15px 0 15px;
opacity: 0;
position: absolute;
bottom: 0px;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.pic {
position: relative;
overflow: hidden;
width: 185px;
height: 185px;
margin: 50px auto;
}
.pic:hover img {
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
transform: scale(1.03);
}
.pic:hover .imgtext {
-webkit-opacity: 1;
opacity: 1;
}
<div class="pic">
<img src="http://nicolacornolti.com/photos/film/img/1.png">
<span class="imgtext">
<h1>THIS IS A TITLE</h1>
<p>and this is a description</p>
</span>
</div>
关于html - 如何在使用 css 在图像上显示文本(悬停)时模糊图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44708432/