悬停时的 CSS HTML 模糊图片标签

Question

我正在为我的一个课程开发门户网站，我的教授提供给我们的模板使用<picture>标签，以便它们根据浏览器的大小而变化。我想模糊和变暗图像，并在悬停时显示注明艺术家的文本。

您可以查看网站以及它在 http://web-students.net/site41/上的外观。

这是我的HTML代码：

<picture class="profile">
<source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
<source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
<img src="images/everett.gif" alt="My sunshine who makes me very happy." />
</picture>

我对 CSS 的尝试：

picture:hover > .overlay {
background-color:#000;
opacity:0.5;
filter: blur(8px);
-webkit-filter: blur(8px);

如果我将<picture>放在<div>中，然后将 CSS 应用于该，它会起作用吗？这还能保持图像的响应吗？

Answer 1

你不需要 .overlaydiv。您可以通过使用之前和/或之后的伪元素来做到这一点。结合图片上的数据属性(请参阅下面的示例(。

picture {
position: relative;
}
picture:before {
content: attr(data-author);
display: none;
position: absolute;
opacity: 0;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color:#000;
opacity:0.5;
filter: blur(8px);
}
picture:hover:before,
picture:hover:after {
display: block;
}
picture:after {
content: attr(data-author);
display: none;
color: white;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
}

<picture class="profile" data-author="More info">
<source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
<source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
<img src="images/everett.gif" alt="My sunshine who makes me very happy." />
</picture>

但是，当然，您可以将其包装在一个额外的div中，并为其指定一个绝对位置(以及右上角的左下角(，以便它具有与父元素相同的尺寸。

Answer 2

您可以使用filters 的组合在悬停时模糊和变暗图像。

例如：

picture:hover img {
filter:blur(6px) contrast(40%);
}

叠加是次要的。伪元素或实际div 可用于此效果。

body {
text-align: center;
}
picture {
margin:1em auto;
display: inline-block;
position: relative;
border:2px solid green;
}
picture::after {
content:"Author Details";
display: flex;
justify-content: center;
align-items:center;
color:white;
font-size:2em;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity .3s ease;
}
picture:hover::after {
opacity:1;
}
img {
transition:all.3s ease;
display: block;
}
picture:hover img {
filter:blur(6px) contrast(40%);
}

<picture class="profile">
<img src="http://www.fillmurray.com/460/300" alt="My sunshine who makes me very happy." />
</picture>