专栏首页前端印象CSS实现图片悬停文字叠加效果

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

引言

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

编写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__overlaydiv,是用于鼠标悬停时显示的,在这里面,我们可以把任何文本相关的东西覆盖在原图之上

编写CSS|创建实际效果

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

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

我们再设置父元素的相对定位,以及 image__overlay 的绝对定位属性,然后将 image__overlaytopleft 设为 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;
}

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

// at start
.image__overlay{
      opacity: 0;
}

// on hover
.image__overlay:hover {
    opacity: 1;
}

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

.image__overlay--blur {
    backdrop-filter: blur(5px);
}

.image__overlay--solid {
    background: #c51f5d;
}

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

强烈推荐

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 3.0实现文字悬停特效

    越陌度阡
  • CSS 3.0实现卡片悬停立体特效

    越陌度阡
  • css实现鼠标悬停图片放大

    解析: transform:scale()可以实现按比例放大或者缩小功能。 transition允许CSS的属性值在一定的时间区间内平滑过渡。 可以调节放大倍数...

    马修
  • CSS 3.0实现视频字幕悬停特效

    越陌度阡
  • CSS中鼠标滑过图片放大效果

    刚刚看了下感觉还不错,纯CSS实现,虽然在开发主题时CSS3用的比较少。这是一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示...

    开心分享
  • CSS中的混合模式,制作高级特效的必备技巧 进入mix-Blend-Mode

    在CSS中,有两个属性负责混合。 mix-blend-mode用于混合DOM元素,background-blend-mode用于组合多个CSS背景。

    前端小智@大迁世界
  • CSS学习记录及整理

    <!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

    SimonDM
  • Web前端基础(02)

    设置背景图片 background-image: url(…/imgs/1.jpg);

    海拥
  • 程序猿必备的10款web前端动画插件二

    1.菜单悬停效果的展示 一些菜单链接悬停效果为您的灵感。由CSS和JavaScript为单个字母动画提供支持。今天,我们希望与您分享一些菜单悬停效果。我们希望这...

    企鹅号小编
  • Custom Beautify

    引入魔改样式的方法很简单,自建一个css文件,然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\sou...

    Akilar
  • 历时4个多月,学习了这 66 个CSS 特效

    这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧...

    前端小智@大迁世界
  • 前端开发者都应知道的 jQuery 小技巧

    Matt Smith 发起的一个小项目,目前已有 15 个 小技巧。伯乐在线会持续跟进更新。

    李维亮
  • CSS 伪元素的一些罕见用例

    伪元素已经使用了很长时间。然而,我觉得有些用例并不是所有开发人员都完全了解的。我写下这篇文章是为了阐明它们,以便它们能被更多地使用。

    前端小智@大迁世界
  • 3d分层悬停效果

    经过了2个星期的努力,我回来了!会继续将我学习路上遇到的问题,以及一些笔记,demo分享给大家

    小丞同学
  • 纯CSS实现Logo图片扫光效果

    德顺
  • JS+CSS 3实现图片滑块效果

    布局,父容器设置 position: relative; 子 mask 容器设置 position: absolute;并撑满整个容器

    iOSSir
  • css基础系列

    border边框,margin外边距,padding内部距,content内容,width宽度。

    达达前端
  • 前端特效开发 | 点击查看大图相册效果

    HTML5学堂(码匠):图片的展示是一个网站中最吸引人的区域,除了图片本身的内容精彩以外,常常还会有各种各样的展示形式。而对于前端开发来说,一个精美的图片展示效...

    HTML5学堂
  • 伪元素动画和转换的例子

    一些创造性的实验使用伪元素上的动画和转换来创建有趣的效果。 ? 今天,我们将尝试动画和伪元素(:之前和之后)的转换,我们将发现它们的潜力。我们将讨论一下关于动画...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券