css特效一:文字覆盖图像悬停效果

接下来是一个系列,就是css中常用的特效,都是css写的,在网站开发中很常用。今天来实现一个文字覆盖图像悬停效果:
css特效一:文字覆盖图像悬停效果

鼠标停到图片上的时候:
css特效一:文字覆盖图像悬停效果

实现原理:
1.首先设置好一个盒子包裹一个图片和文本域
2.设置一个文本,然后opacity=0隐藏起来
3.设置文本的hover效果opacity=1遮盖了图片
4.最后背景颜色和文字显示的时候可以设置一些动画效果

技术难点:

  1. 将container设置为position: relative是为了将下一级的overlay设置为position: aboslute,因为这个属性是绝对定位,参考的父级节点是上级第一个position不为block的节点,如果container不设置为relative的话,参考的将是body。然后top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;是为了撑满conainer这个元素

  2. transition过渡和transform转换:
    transition是一个复合属性包含了:
    transition-property 指定CSS属性的name,transition效果
    transition-duration transition效果需要指定多少秒或毫秒才能完成
    transition-timing-function 指定transition效果的转速曲线
    transition-delay 定义transition效果开始的时候

transform:定义了一个2D或3D的转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字覆盖图像悬停效果</title>
    <style>
        body {
            text-align: center;
        }
        
        .container {
            position: relative;
            width: 50%;
            margin: auto;
        }
        
        .image {
            display: block;
            width: 100%;
            height: auto;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: #008CBA;
        }
        
        .container:hover .overlay {
            opacity: 1;
        }
        
        .text {
            color: white;
            font-size: 70px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <h2>淡入效果</h2>
    <p>鼠标移动到图片上查看效果</p>

    <div class="container">
        <img src="img/1.jpg" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>

</body>

</html>
上一篇:我的vue项目书写规范


下一篇:“21天好习惯”第一期-3