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

@零一

发布于 2021-12-31 19:51:13

3.7K0

发布于 2021-12-31 19:51:13

文章被收录于专栏：前端印象前端印象

引言

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

编写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">Oceandiv>
        <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 效果。希望这对你有帮助。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-05-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

css

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

容器

css

html

登录后参与评论

0 条评论

热度