[分享]css3悬浮出现另一张图片

CSS3是现今Web前端开发中不可缺少的技术之一，它不仅可以优化网页布局和美化页面样式，还可以增添一些交互效果，使页面更加生动活泼。其中，悬浮出现另一张图片便是一种常见的效果，下面我们来介绍一下具体怎...

CSS3是现今Web前端开发中不可缺少的技术之一，它不仅可以优化网页布局和美化页面样式，还可以增添一些交互效果，使页面更加生动活泼。其中，悬浮出现另一张图片便是一种常见的效果，下面我们来介绍一下具体怎么实现。

 .hover-img {
        position: relative;
        display: inline-block;
    }
    .hover-img:hover::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(other-img.jpg) no-repeat center center;
        background-size: cover;
        opacity: 0.8;
    } 

在上述代码中，我们首先创建了一个类名为“hover-img”的元素，然后使用“position: relative”将其设置为相对定位，方便后续的绝对定位；同时也使用“display: inline-block”设置为内联块级元素，使其可以在一行上显示，不破坏布局。接下来，我们在hover状态下使用“::before”伪元素创建一个遮罩层，通过“content: '”设置一个空内容、块级显示的元素，占据父元素的全部空间；然后再使用“position: absolute”将遮罩层绝对定位，通过“top: 0”和“left: 0”将其覆盖整个元素；接着使用“background: url(other-img.jpg)”将遮罩层的背景图设置为另一张图片；通过“background-size: cover”让图片完全填充遮罩层的空间；最后再使用“opacity: 0.8”设置遮罩层的透明度，实现半透明的效果。

以上便是实现css3悬浮出现另一张图片的具体方法，简单易懂、代码精简，快来尝试一下吧！