鼠标悬浮图片特效

最新推荐文章于 2024-01-15 16:14:08 发布

soosgo

最新推荐文章于 2024-01-15 16:14:08 发布

阅读量638

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Doulvme/article/details/82352034

版权

CSS 专栏收录该内容

37 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片悬浮放大</title>
		<style>
			*{padding: 0px;margin: 0px;}
			.container{width: 80%;margin: 50px auto;color: #FFFFFF;}
			.item-wrap{position: relative;width: 290px;height: 280px;overflow: hidden;display: inline-block;}
			.item{width: 100%;height: 100%;transition: all 0.5s;}
			.item-wrap:hover .item{transform: scale(1.1);}
			.item-inner{width:100%;height:100%;background: rgba(0, 0, 0, 0) linear-gradient(10deg, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.15) 51%, rgba(0, 0, 0, 0) 70%) repeat scroll 0 0;}
			.item-txt{position: absolute;width:100%;bottom: 20px;}
			.container h2{padding-top: 100px;line-height: 50px;text-align: center;}
			.item:hover{transform: scale(1.2);}
			
			.list-item{position: relative;overflow: hidden;display: inline-block;}
			.list-item img{width: 100%;height: 100%;transition: all 0.5s;}
			.list-item .item-info{position: absolute;width:100%;bottom:0px;padding-bottom: 20px;
				background: rgba(0, 0, 0, 0) linear-gradient(10deg, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.15) 51%, rgba(0, 0, 0, 0) 70%) repeat scroll 0 0;
			}
			.list-item:hover img{transform: scale(1.1);}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item-wrap">
				<div class="item"  style="background: url(img/jpk1.jpg) no-repeat center center;background-size: 100% 100%;">
					<div class="item-inner"></div>
				</div>
				<div class="item-txt">
					<h2>Notice:first message</h2>
					<p>Pay attention,please！This is the first message for you.</p>
				</div>
			</div>
			<div class="item-wrap">
				<div class="item"  style="background: url(img/jpk2.jpg) no-repeat center center;background-size: 100% 100%;">
					<div class="item-inner"></div>
				</div>
				<div class="item-txt">
					<h2>Notice:first message</h2>
					<p>Pay attention,please！This is the first message for you.</p>
				</div>
			</div>
		</div>
		<!--================这是一道华丽的分割线============-->
		<div class="container">
			<div class="list-item">
				<img src="img/jpk1.jpg"/>
				<div class="item-info">
					<h2>Notice:first message</h2>
					<p>Pay attention,please！This is the first message for you.</p>
				</div>
			</div>
			<div class="list-item">
				<img src="img/jpk2.jpg"/>
				<div class="item-info">
					<h2>Notice:Last message</h2>
					<p>Pay attention,please！This is the first message for you.</p>
				</div>
			</div>
		</div>
	</body>
</html>

效果图：