前端HTML透明度的变化展示
效果图:
该图片透明度opacity从0.2装换为1的效果
代码
下面展示 代码
:
鼠标移入:透明度为1,文字上浮
可以直接运行,只需要更换相应图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
}
.box {
width: 300px;
background-color: black;
/* 向下移动100px,水平居中 */
margin: 100px auto;
/* 溢出隐藏 */
overflow: hidden;
/* 相对定位 */
position: relative;
}
.box img {
width: 300px;
/* 显示方式:块元素 */
display: block;
/* 透明度0-1 */
opacity: 0.2;
/* 持续时间为0.5s */
transition: all 0.5s;
}
/* 鼠标移入,img发生变化 */
.box:hover img {
opacity: 1;
/* 放大1.5倍 */
transform: scale(1.5);
}
.box p {
color: honeydew;
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
/* 行高 */
line-height: 175px;
/* 文本居中 */
text-align: center;
width: 100%;
/* 将文本下拉到box外,溢出隐藏 */
margin-top: 100px;
transition: all 0.5s;
}
.box:hover p {
opacity: 1;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/sample-01.jpg" alt="">
<p>hello</p>
</div>
</body>
</html>