【css】伪元素实现图片个悬停文字聚焦效果
实现重点：
-
文字覆盖在图片上：
通过使用position: absolute将 .box 文字盒子定位在图片上方。父容器 .img-wrap 使用了position: relative确保子元素的绝对定位在父容器的边界内生效。 -
创建悬停效果：
通过使用&::before和&::after伪元素实现半透明黑色背景层，这些伪元素在正常状态下通过opacity: 0和transform: scaleY(2)进行隐藏，并在悬停时使用transform: scale(1)和opacity: 1进行展示。 -
过渡动画效果：
图片和文字盒子上的所有过渡效果都设置了transition，使得在悬停时的动画效果平滑。这包括图片透明度的变化、伪元素的缩放，以及文字的显示。 -
伪元素的使用：
通过&::before和&::after创建两层边框效果，悬停时它们会从上下两端逐渐收缩，覆盖在图片上，形成一个视觉上的悬停突出效果。
代码实现：
<template><div class="img-wrap"><imgsrc="https://fastly.picsum.photos/id/29/4000/2670.jpg?hmac=rCbRAl24FzrSzwlR5tL-Aqzyu5tX_PA95VJtnUXegGU"/><div class="box"><div>some</div><div>text</div></div></div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.img-wrap {color: #fff;display: inline-block;margin: 16px;max-width: 320px;overflow: hidden;position: relative;text-align: center;width: 100%;img {// 将图片的垂直对齐方式设置为顶部对齐。vertical-align: top;max-width: 100%;// 隐藏图片背面的不可见部分，可以提高渲染性能，防止浏览器渲染背面的像素。backface-visibility: hidden;}// 文字box.box {position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;flex-direction: column;justify-content: center;gap: 6px;font-weight: 600;opacity: 0;z-index: 2;transition-delay: 0.1s;font-size: 24px;letter-spacing: 1px;text-transform: uppercase;}// 伪元素实现两层边框效果半透明黑色背景层&::before,&::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;// 沿Y轴（垂直方向）放大2倍transform: scaleY(2);}&:hover::before,&:hover::after {// 悬停时恢复伪元素的正常比例，使它看起来是从放大的状态逐渐收缩到正常大小// 让用户感觉到伪元素从图片的上下两端收缩出现。transform: scale(1);opacity: 1;}&:hover {img {opacity: 0.7;}}&:hover .box {opacity: 1;}
}
// 图片和文字盒子上的所有元素都有过渡效果
.img-wrap * {box-sizing: border-box;transition: all 0.45s ease;
}
</style>