CSS图片悬浮遮罩小动画

最新推荐文章于 2024-09-13 09:10:07 发布

码路老默007

最新推荐文章于 2024-09-13 09:10:07 发布

阅读量195

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/2201_75705263/article/details/129910422

版权

该文章展示了一个使用CSS3创建的图片悬停效果，当鼠标悬停在图片上时，一个半透明遮罩会从左下角以旋转的方式展开，显示图片下方的文字信息。示例代码包括HTML结构和CSS样式，适用于网页设计和前端开发。

摘要由CSDN通过智能技术生成

效果

高齐强跪下来会说什么

html部分

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title又一款简单漂亮CSS3图片悬停遮罩效果</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="box">
<ul>
	<li>
		<img src="images/下载.jpg"  alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>高齐强</h4>
			<p>我想做你的干儿子</p>
		</div>
	</li>
	<li>
		<img src="images/下载.jpg"  alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>高启强</h4>
			<p>我想做你的干儿子</p>
		</div>
	</li>
</ul>
</div>

css部分

* { margin: 0; padding: 0; }
body { 
    background: #e75e5e; 
}
.box { 
    width: 500px; 
    height: 500px; 
    margin: 50px auto; 
}
.box ul li { 
    float: left; 
    width: 190px; 
    height: 190px; 
    background: #979797;
     border: 10px solid  #979797;
     margin: 10px; 
     list-style: none; 
     position: relative; 
     overflow: hidden; 
    }
.box ul li .cover a { 
    width: 30px; 
    height: 30px; 
    background: #ffffff; 
    display: block; 
    border-radius: 50%; 
    line-height: 30px; 
    margin: 30px auto; 
}
.box ul li img{
    width: 190px;
    height: 190px;
}
.box ul li .cover a i { 
    color: red; 
}
.box ul li .cover { 
    width: 190px; 
    height: 190px; 
    background: rgba(255, 39, 42, 0.7); 
    position: absolute; 
    left: 0; 
    top: 0; 
    text-align: center; 
    color: #ffffff; 
    /* 旋转的点在左下角 */
    transform-origin: left bottom; 
    -webkit-transform-origin: left bottom; 
    -moz-transform-origin: left bottom; 
    transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    /* 过渡 */
    transition: all 0.35s; 
    -webkit-transition: all 0.35s; 
    -moz-transition: all 0.35s; 
}
.box ul li .cover p { 
    margin-top: 10px; 
    font-size: 14px; 
}
.box ul li:hover .cover { 
    /* 2D效果 */
    transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
}