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

2024-01-07 17:01:10

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

鼠标停到图片上的时候：

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

技术难点：

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

码农公寓

相关文章