悬停时的图像叠加效果
在悬停时显示一个图像叠加效果。
使用 ::before和::after伪元素分别创建叠加层的顶部和底部条。设置它们的opacity、transform和transition以产生所需的效果。使用 <figcaption>作为叠加层的文本。设置display: flex、flex-direction: column和justify-content: center以将文本居中到图像中。使用 :hover伪选择器来更新所有元素的opacity和transform,并显示叠加层。
<figure class="hover-img">
<img src="https://picsum.photos/id/200/440/320.jpg"/>
<figcaption>
<h3>悬停<br/>文本</h3>
</figcaption>
</figure>
.hover-img {
background-color: #000;
color: #fff;
display: inline-block;
margin: 8px;
max-width: 320px;
min-width: 240px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.hover-img * {
box-sizing: border-box;
transition: all 0.45s ease;
}
.hover-img::before,
.hover-img::after {
background-color: rgba(0, 0, 0, 0.5);
border-top: 32px solid rgba(0, 0, 0, 0.5);
border-bottom: 32px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
transition: all 0.3s ease;
z-index: 1;
opacity: 0;
transform: scaleY(2);
}
.hover-img img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.hover-img figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.1em;
opacity: 0;
z-index: 2;
transition-delay: 0.1s;
font-size: 24px;
font-family: sans-serif;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.hover-img:hover::before,
.hover-img:hover::after {
transform: scale(1);
opacity: 1;
}
.hover-img:hover > img {
opacity: 0.7;
}
.hover-img:hover figcaption {
opacity: 1;
}
这个技巧创建了一个引人入胜的图像叠加效果,当用户将鼠标悬停在图像上时,会显示额外的信息。这通常用于图片库、产品展示或任何你想要提供关于图像的额外上下文的地方。
以下是关键点:
HTML 结构使用一个
<figure>元素作为整个组件的容器,包含图像本身和<figcaption>元素。<figcaption>包含在悬停时出现的叠加文本。.hover-img选择器设置整个组件的基本样式。它设置背景颜色、文本颜色、显示类型、边距和尺寸。overflow: hidden确保任何超出容器边界的内容都会被隐藏。position: relative为伪元素和<figcaption>建立了一个定位上下文。.hover-img *选择器将box-sizing: border-box应用于所有子元素,确保内边距和边框包含在元素的宽度和高度内。它还为所有属性应用了一个transition,以创建平滑的悬停效果。.hover-img::before和.hover-img::after选择器创建叠加层的顶部和底部条。它们最初是透明的(opacity: 0)并且被缩放(transform: scaleY(2))。当悬停时,它们淡入并缩放到其正常大小,创建一个有趣的显示效果。.hover-img img选择器设置图像本身的样式。vertical-align: top确保图像与其容器的顶部对齐。max-width: 100%确保图像适合容器。backface-visibility: hidden是一个常用的技巧,可以防止在应用 3D 变换时图像闪烁。.hover-img figcaption选择器设置叠加文本的样式。它使用position: absolute和top,bottom,left,right属性将其定位在图像的中心。display: flex,flex-direction: column和justify-content: center将文本垂直和水平居中。opacity: 0最初隐藏文本,transition-delay: 0.1s创建一个轻微的延迟,以便在显示文本之前,条纹有时间出现。
