接下来是一个系列，就是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-durationtransition效果需要指定多少秒或毫秒才能完成
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>
网友评论