版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lengyuezuixue/article/details/82118707
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
.container {
position: relative;
width: 50%;
}
.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: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body style="text-align:center;">
<h2>淡入效果</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
文字覆盖图像悬停效果-从上至下
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body style="text-align:center;">
<h2>淡入效果- 从上至下</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">如约智惠</div>
</div>
</div>
</body>
</html>文字覆盖图像悬停效果-从下至上
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body style="text-align:center;">
<h2>淡入效果- 从下至上</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">如约智惠</div>
</div>
</div>
</body>
</html>文字覆盖图像悬停效果-从左至右
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height:100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body style="text-align:center;">
<h2>淡入效果- 从左至右</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">如约智惠</div>
</div>
</div>
</body>
</html>文字覆盖图像悬停效果-从右至左
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height:100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body style="text-align:center;">
<h2>淡入效果- 从左至右</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">如约智惠</div>
</div>
</div>
</body>
</html>文字覆盖图像悬停效果-淡入透明
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body style="text-align:center;">
<h2>淡入透明效果</h2>
<p>鼠标移动到图片上查看效果</p>
<div class="container">
<img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>