Pure CSS Image Stack Animation on Hover

byCodingFlicks -December 12, 2020

0

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Pure CSS Image Stack Animation on Hover</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-xs-12">
				<div class="img-area">
					<img src="https://i.postimg.cc/3NnGcWRG/1.jpg"> 
					<img src="https://i.postimg.cc/3NnGcWRG/1.jpg"> 
					<img src="https://i.postimg.cc/3NnGcWRG/1.jpg"> 
					<img src="https://i.postimg.cc/3NnGcWRG/1.jpg">
				</div>
			</div>
			<div class="col-md-4 col-xs-12">
				<div class="img-area">
					<img src="https://i.postimg.cc/VLknb9GW/2.jpg"> 
					<img src="https://i.postimg.cc/VLknb9GW/2.jpg"> 
					<img src="https://i.postimg.cc/VLknb9GW/2.jpg"> 
					<img src="https://i.postimg.cc/VLknb9GW/2.jpg">
				</div>
			</div>
			<div class="col-md-4 col-xs-12">
				<div class="img-area">
					<img src="https://i.postimg.cc/Xq7Gd38Y/3.jpg"> 
					<img src="https://i.postimg.cc/Xq7Gd38Y/3.jpg"> 
					<img src="https://i.postimg.cc/Xq7Gd38Y/3.jpg"> 
					<img src="https://i.postimg.cc/Xq7Gd38Y/3.jpg">
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

body {
	margin: 0px;
	padding: 0px;
	background: deepskyblue;
}
.img-area {
	margin-top: 50%;
	width: 350px;
	height: 300px;
	background: darkseagreen;
	border-radius: 5px;
}
.img-area img {
	width: 350px;
	height: 300px;
	border-radius: 6px;
	position: absolute;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .8);
	transition: all .5s;
}
.img-area:hover img:nth-child(1) {
	transform: translate(-10px, -10px);
	opacity: .4;
}
.img-area:hover img:nth-child(2) {
	transform: translate(-20px, -20px);
	opacity: .6;
}
.img-area:hover img:nth-child(3) {
	transform: translate(-30px, -30px);
	opacity: .8;
}
.img-area:hover img:nth-child(4) {
	transform: translate(-40px, -40px);
	opacity: 1;
}

For More HTML, CSS, CSS Animations, Javascript Related snippets please follow our Social Media profiles to stay connected with this blog. Thanks for visiting.

Please do not enter any spam link in the comment box.