【css】伪元素实现图片个悬停文字聚焦效果

本文主要是介绍【css】伪元素实现图片个悬停文字聚焦效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现重点：

1. 文字覆盖在图片上：
   通过使用 position: absolute 将 .box 文字盒子定位在图片上方。父容器 .img-wrap 使用了 position: relative 确保子元素的绝对定位在父容器的边界内生效。

2. 创建悬停效果：
   通过使用 &::before 和 &::after 伪元素实现半透明黑色背景层，这些伪元素在正常状态下通过 opacity: 0 和 transform: scaleY(2) 进行隐藏，并在悬停时使用 transform: scale(1) 和 opacity: 1 进行展示。

3. 过渡动画效果：
   图片和文字盒子上的所有过渡效果都设置了 transition，使得在悬停时的动画效果平滑。这包括图片透明度的变化、伪元素的缩放，以及文字的显示。

4. 伪元素的使用：
   通过 &::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>

这篇关于【css】伪元素实现图片个悬停文字聚焦效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---