鼠标悬停出现遮罩或图片放大效果

最新推荐文章于 2024-05-09 17:25:39 发布

LRB_Len

最新推荐文章于 2024-05-09 17:25:39 发布

阅读量6.6k

点赞数 10

分类专栏：前端小知识文章标签： hover效果

本文链接：https://blog.csdn.net/qq_39588630/article/details/82789904

版权

前端小知识专栏收录该内容

7 篇文章 2 订阅

订阅专栏

说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。

1.鼠标悬停出现遮罩效果

* ①先看效果图：

* ②再献上完整代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			li {
				list-style-type: none;
			}
			
			.grey-row {
				width: 1200px;
				margin: 0 auto;
				background-color: #f2f2f2;
			}
			
			.img-desc {
				overflow: hidden;
				padding: 20px 10px;
			}
			
			.img-desc ul li {
				float: left;
				width: 24%;
				height: 250px;
				padding: 5px;
				position: relative;
				z-index: 2;
				overflow: hidden;
			}
			
			.img-desc ul li img {
				height: 250px;
			}
			
			/*悬停出现遮罩效果*/
			.img-desc ul li:hover .case_info {
				top: 5px;
			}
			
			/*遮罩效果*/
			.case_info {
				margin-top: -0px;
				position: absolute;
				top: -260px;
				color: #fff;
				transition: all .2s;
				background-color: rgba(216, 0, 0, 0.5);
				width: 250px;
				height: 250px;
			}
			
			h2 {
				text-align: center;
				line-height: 200px;
			}
		</style>
		<title></title>
	</head>

	<body>
		<div class="grey-row">
			<div class="img-desc">
				<h1>点击阴影遮罩</h1>
				<ul>
					<li>
						<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
						<dl class="case_info">
							<dt><h2>天猫望日</h2></dt>
						</dl>
					</li>
					<li>
						<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
						<dl class="case_info">
							<dt><h2>天猫吞日</h2></dt>
						</dl>
					</li>
					<li>
						<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
						<dl class="case_info">
							<dt><h2>天猫啸日</h2></dt>
						</dl>
					</li>
					<li>
						<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
						<dl class="case_info">
							<dt><h2>天猫喵日</h2></dt>
						</dl>
					</li>
				</ul>
			</div>
		</div>

	</body>

</html>

* ③最后稍微做下注解说明：

图片只是静态的，最好可以自己运行上面代码直观感受下效果！

该效果除了可以作用在图片上当然也可以作用在div上；具体解释说明我在Css代码上已经加了注释；

如果看不明白的话可以复制代码，自己用浏览器开发者工具调试一下；自己动手，才能更快领悟；

2.鼠标悬停图片放大效果