css实现鼠标移入背景图片变灰并浮现文字的效果

AzeShinja

于 2023-11-27 15:34:06 发布

阅读量1.1k

点赞数 11

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/AzeShinja/article/details/134646647

版权

本文介绍了一个使用SCSS编写的CSS样式，展示了如何在HTML中的div元素包裹的img标签上实现鼠标悬停时的图片变暗、边框模糊以及悬浮显示Ctrl+V粘贴替换文案的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先上效果图

请添加图片描述

说明一下我的html结构

在这里插入图片描述
如上图是一个div包裹的img标签, div的块大小width, height 自己定义, 我说明一下核心样式代码

下面写法是scss, 请自行替换

  .web-query-image {
    position: relative; // 相对定位, 方便浮现文案进行绝对定位
    border-radius: 8px;
    box-sizing: border-box;
    > img {
      &:hover {
        filter: brightness(0.4); // 图片变暗,要不然浮现的文字看不清
      }
    }
    &:hover {
      border: 2px solid #0080FF;
      border-radius: 8px;
      backdrop-filter: blur(10px); // 图片添加模糊度
      &:after {
        font-size: 12px;
        pointer-events: none; // 方式用户鼠标浮在文案上时丢失父元素的hover效果
        color: #FFFFFF;
        content: 'Ctrl+V 粘贴替换';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
      }
    }
  }