例如:https://jsfiddle.net/q4871w6L/
.article-image {
height: 150px;
width: 238px;
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image:hover {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image {
position: relative;
width: 238px;
height: 150px;
}
.article-image > p {
display: none;
}
.article-image:hover > p {
position: absolute;
top: 40%;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}
<div class="ar-image">
<div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image">
<p>Lire plus</p>
</div>
</div>
我试图在悬停时模糊背景而不是图像上的文本。 如何在不模糊图像上的文字的情况下模糊背景图像?
感谢
最佳答案
.article-image{
height: 150px;
width: 238px;
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.ar-image:hover .article-image{
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image{
position: relative;
width: 238px;
height: 150px;
}
.ar-image > p{
display: none;
}
.ar-image:hover > p{
position: absolute;
top: 0;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 0;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
line-height:150px;
margin:0;
}
<div class="ar-image">
<div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"></div>
<p>Lire plus</p>
</div>
注意: 由于文本是绝对定位的,我已将其从背景容器中移除并放置在外部。
并为主容器('.ar-image')添加了 :hover 事件。
关于背景图像 :hover but not on text 上的 Css 模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39122324/