可以,然后呢。我有个问题。
我想要一张悬停时模糊的图片,同时让文字出现在它上面。
我找到了一种简单的方法来模糊图像并显示文本,但不能同时显示两者;事实上,将两个代码合并在一起可以使图片看起来一点也不模糊。我认为这是因为文本实际上覆盖了图像,并且浏览器没有收到图像正在悬停的消息。
这是上面有文字的图像,这是悬停时模糊的图像 我该如何解决这个问题?我正在挣扎,我想我已经找到了另一种方法,但它有点麻烦。
这是一些代码:
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); …Run Code Online (Sandbox Code Playgroud)