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 lidihuo.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>
