CSS覆盖层

CSS覆盖层

CSS覆盖层意味着用涂料覆盖某些物体的表面。换句话说,它用于将一件事放在另一件事的顶部。重叠式广告使网页更具吸引力,并且易于设计。
创建叠加效果意味着将两个div放在同一位置,但是两个都将在需要时出现。要显示第二个div,我们可以将鼠标悬停或单击一个div。在这两个div中,一个div是覆盖div,其中包含当用户将鼠标悬停在图像上方时将显示的内容,第二个div是一个容器,将容纳图像及其覆盖。

淡入淡出叠加效果

在这种叠加效果中,当我们在图像上移动光标时,叠加层将出现在图像的顶部。让我们看看它是如何工作的。

示例

 <!DOCTYPE HTML>
<html>
<head>
    <title>图像叠加</title>
    <style>
    .container img {
        width: 300px;
        height: 300px;
    }
    .container {
        position: relative;
        width: 25%;
        height: auto;
    }
    .overlay {
        position: absolute;
        transition: 0.5s ease;
        height: 300px;
        width: 300px;
        top: 0;
        left: 20px;
        background-color: lightblue;
        opacity: 0;
    }
    .container:hover .overlay {
        opacity: 0.9;
    }
    </style>
</head>
<body>
    <center>
        <h1>淡入叠加</h1>
        <h2>将光标移到图像上可以查看效果。</h2>
        <div class="container">
            <img src="../uploads/html/rose.jpg">
            <div class="overlay"></div>
        </div>
    </center>
</body>
</html>

图像叠加幻灯片

我们可以通过
顶部,底部,左侧和右侧四种类型创建滑动叠加效果。

幻灯片从顶部到底部的重叠式

首先,我们了解如何在一个幻灯片中创建幻灯片。

示例

 <!DOCTYPE HTML>
<html>
<head>
    <style>
    .container img {
        width: 300px;
        height: 300px;
    }
    .container {
        position: relative;
        width: 25%;
        height: auto;
    }
    .container:hover .overlay {
        opacity: 1;
        height: 300px;
    }
    .overlay {
        position: absolute;
        transition: 0.7s ease;
        opacity: 0;
        width: 300px;
        height: 0;
        top: 0;
        right: 20px;
        background-color: lightblue;
        ;
    }
    </style>
</head>
<body>
    <center>
        <h1>从顶部到底部滑动覆盖</h1>
        <h2>将光标移到图像上可以查看效果。</h2>
        <div class="container">
            <img src="../uploads/html/rose.jpg">
            <div class="overlay"></div>
        </div>
    </center>
</body>
</html>

从底部向顶部滑动覆盖

在此覆盖效果中,当我们将光标移到图像上方时,将从底部向顶部滑动。在下图中将很清楚。

示例

 <!DOCTYPE HTML>
<html>
<head>
    <style>
    .container img {
        width: 300px;
        height: 300px;
    }
    .container {
        position: relative;
        width: 25%;
        height: auto;
    }
    .container:hover .overlay {
        opacity: 1;
        height: 300px;
    }
    .overlay {
        position: absolute;
        transition: 0.7s ease;
        opacity: 0;
        width: 300px;
        height: 0px;
        bottom: 0;
        right: 20px;
        background-color: lightblue;
        ;
    }
    </style>
</head>
<body>
    <center>
        <h1>从底部到顶部滑动覆盖</h1>
        <h2>将光标移到图像上可以查看效果。</h2>
        <div class="container">
            <img src="../uploads/html/rose.jpg">
            <div class="overlay"></div>
        </div>
    </center>
</body>
</html>

从左向右滑动覆盖

顾名思义,从左向右滑动。请参阅以下示例以详细了解它。

示例

 <!DOCTYPE HTML>
<html>
<head>
    <style>
    .container img {
        width: 300px;
        height: 300px;
    }
    .container {
        position: relative;
        width: 25%;
        height: auto;
    }
    .container:hover .overlay {
        opacity: 1;
        width: 300px;
    }
    .overlay {
        position: absolute;
        transition: 0.7s ease;
        opacity: 0;
        width: 0;
        height: 100%;
        bottom: 0;
        left: 20px;
        background-color: lightblue;
        ;
    }
    </style>
</head>
<body>
    <center>
        <h1>从左向右滑动覆盖</h1>
        <h2>将光标移到图像上可以查看效果。</h2>
        <div class="container">
            <img src="../uploads/html/rose.jpg">
            <div class="overlay"></div>
        </div>
    </center>
</body>
</html>

从右向左滑动覆盖

与上面的滑动效果类似,不同之处在于滑动从右向左滑动。

示例

 <!DOCTYPE HTML>
<html>
<head>
    <style>
    .container img {
        width: 300px;
        height: 300px;
    }
    .container {
        position: relative;
        width: 25%;
        height: auto;
    }
    .container:hover .overlay {
        opacity: 1;
        width: 300px;
    }
    .overlay {
        position: absolute;
        transition: 0.7s ease;
        opacity: 0;
        width: 0;
        height: 100%;
        bottom: 0;
        right: 20px;
        background-color: lightblue;
        ;
    }
    </style>
</head>
<body>
    <center>
        <h1>从右向左滑动覆盖</h1>
        <h2>将光标移到图像上可以查看效果。</h2>
        <div class="container">
            <img src="../uploads/html/rose.jpg">
            <div class="overlay"></div>
        </div>
    </center>
</body>
</html>

图像叠加标题

在图像叠加效果中,当我们将光标移到图像上方时,将在图像上看到标题。参见下图。

示例

 <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
        text-align: center;
    }
    * {
        box-sizing: border-box;
    }
    .container {
        position: relative;
        width: 50%;
        max-width: 300px;
    }
    img {
        display: block;
        width: 100%;
        height: auto;
    }
    .overlay {
        position: absolute;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        width: 100%;
        opacity: 0;
        transition: .9s ease;
        font-size: 25px;
        padding: 20px;
    }
    .container:hover .overlay {
        opacity: 1.5;
    }
    </style>
</head>
<body>
    <h1>图像叠加标题效果</h1>
    <h2>将鼠标移到图像上可以查看效果。</h2>
    <center>
        <div class="container">
            <img src="../uploads/html/rose.jpg">
            <div class="overlay">Welcome to bianchenghao6.com</div>
        </div>
    </center>
</body>
</html>

图像覆盖图标

在这种覆盖效果中,当鼠标悬停时,将有一个覆盖整个图像的图标。我们可以设置该图标上的链接以在页面之间切换。从下面的示例可以清楚地看到。

示例

 <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .container {
        position: relative;
        width: 100%;
        max-width: 400px;
    }
    .image {
        display: block;
        width: 100%;
        height: auto;
    }
    .overlay {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 1s ease;
        background-color: lightblue;
    }
    .container:hover .overlay {
        opacity: 1;
    }
    .icon {
        color: blue;
        font-size: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    </style>
</head>
<body>
    <center>
        <h1>图像叠加图标效果</h1>
        <h2>将鼠标移到图像上可以查看效果。</h2>
        <div class="container">
            <img src="../uploads/html/rose.jpg" class="image">
            <div class="overlay">
                <a href="#" class="icon">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
    </center>
</body>
</html>