html+css3图片栏鼠标上移效果

最新推荐文章于 2024-07-11 17:17:41 发布

月薪不过5000不改名

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量413

点赞数

文章标签：前端 html css

原文链接：https://www.bilibili.com/video/BV1e4411W7Gh?spm_id_from=333.337.top_right_bar_window_history.content.click

版权

1.效果图
图片栏hover效果
2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3图片栏</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="imgBx">
					<img src="img/bg1.jpg" alt="">
				</div>
				<div class="content">
					<h2>Title</h2>
					<p>
						contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
					</p>
					<a href="#">Read More</a>
				</div>
			</div>
			<div class="box">
				<div class="imgBx">
					<img src="img/bg2.jpg" alt="">
				</div>
				<div class="content">
					<h2>Title</h2>
					<p>
						contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
					</p>
					<a href="#">Read More</a>
				</div>
			</div>
			<div class="box">
				<div class="imgBx">
					<img src="img/bg3.jpg" alt="">
				</div>
				<div class="content">
					<h2>Title</h2>
					<p>
						contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
					</p>
					<a href="#">Read More</a>
				</div>
			</div>
			<div class="box">
				<div class="imgBx">
					<img src="img/bg4.jpg" alt="">
				</div>
				<div class="content">
					<h2>Title</h2>
					<p>
						contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
					</p>
					<a href="#">Read More</a>
				</div>
			</div>
			
		</div>
		
	</body>
</html>

3.css

body{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: consolas;
}
.container{
	position: relative;
	width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.container .box{
	position: relative;
	width: 280px;
	height: 400px;
	margin: 20px 0;
	box-sizing: border-box;
	overflow: hidden;
}
.container .box .imgBx{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	clip-path:circle(400px at center 100px);
	transition: 0.5s;
	/* transition-delay: 0.5s; */
}
.container .box:hover .imgBx{
	clip-path:circle(80px at center 100px);
	transition-delay: 0.3s;
}
.container .box .imgBx img{
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.container .box:hover .imgBx img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}
.container .box .content{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 55%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}
.container .box .content h2{
	margin: 0;
	padding: 0;
}
.container .box .content a{
	text-decoration: none;
	background-color: #000;
	color: #fff;
	padding: 5px;
	display: inline-block;
}
.container .box .content h2,
.container .box .content p,
.container .box .content a{
	opacity: 0;
	transition: 0.5s;
	transform: translateY(20px);
}
.container .box:hover .content h2{
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 0.5s;
}
.container .box:hover .content p{
	word-wrap:break-word;
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 0.7s;
}
.container .box:hover .content a{
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 0.9s;
}

记录每一个前端小案例！！！

月薪不过5000不改名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css3图片栏鼠标上移效果

1.效果图2.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css3图片栏</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div
复制链接

扫一扫