CSS实现图片悬停文字叠加效果

客官°小女子只卖身不卖艺 2023-01-21 02:11 203阅读 0赞

## 引言 ##

在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 `HTML` 和 `CSS` 基本知识。

![图片][af8bbb0f61789255b4274b59961b870a.gif]

## 编写HTML ##

我们的 `html` 代码非常简单，只有几行：

<div class="image">
        <img class="image__img" src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072__340.jpg" alt="Bricks">
        <div class="image__overlay">
            <div class="image__title">Ocean</div>
            <p class="image__description">
                Enjoy the blue color of ocean.
            </p>
        </div>
    </div>

在顶部有一个`img`类的`div`，它是最大的容器。然后在其内部给要渲染的图像设置类名`image__img`; 同级还有一个类名为`image__overlay`的`div`，是用于鼠标悬停时显示的，在这里面，我们可以把任何文本相关的东西覆盖在原图之上

## 编写CSS｜创建实际效果 ##

首先我们对 `image__img` 做一些基本的样式设置

.image__img { 
        display: block;
        width: 100%;
        height: 100%;
        background-size: cover;
    }

我们再设置父元素的相对定位，以及 `image__overlay` 的绝对定位属性，然后将 `image__overlay` 的 `top` 和 `left` 设为 `0`，并将宽高设为 `100%`，即与父容器重叠。同时设置一下黑色背景色以及透明度，做一个隐约的效果。最后设置一下动画过度效果`transition`，以及一些想要的字体相关的css属性，这里大家可以自行调整

.image { 
        position: relative;
        width: 30%;
    }
    
    .image__overlay { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
        font-family: 'Quicksand', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 0.25s;
    }

现在是最重要的部分，如果我们鼠标离开，则看不到;鼠标放上去，则能看到。所以设置默认的透明度为 `0`，`hover`时，透明度为 `1`

// at start .image__overlay{ 
          opacity: 0;
    }
    
    // on hover .image__overlay:hover { 
        opacity: 1;
    }

就是这么简单，我们已经完成了图像悬停文本叠加效果。我们也可以修改这个覆盖效果，有模糊的覆盖，也有纯色的覆盖。我们只需要将以下简单的类添加到 `css` 中，然后将他们添加到类名为 `image__overlay` 的 `div` 元素中即可

.image__overlay--blur { 
        backdrop-filter: blur(5px);
    }
    
    .image__overlay--solid { 
        background: #c51f5d;
    }

就这么简单。我们用这样的代码创建了三个很酷的 CSS Hover 效果。希望这对你有帮助。

## 强烈推荐 ##

给你们推荐一下我的[个人博客][Link 1]，拥有大量优质文章、面试宝典、算法精选，欢迎访问~

[af8bbb0f61789255b4274b59961b870a.gif]: /images/20221021/c1e5c4a15536429c9ec2bbd9bd930087.png
[Link 1]: https://lpyexplore.gitee.io/blog/