Stunning Split Screen Image Hover Effect

byCodingFlicks -November 18, 2020

1

In this blog, I will be sharing a snippet based on how to create an awesome split-screen image hover animation using HTML and CSS. in this CSS animation. When we hover over the image, the overlay text will appear from the bottom. This animation is not like the traditional one, where overlay text will be visible at once. Instead, it will appear with a split-screen animation.

I used different background positon and transition delay for each segment of the split-screen so that it appears with a smooth transition. When we remove the hover, the animation will occur oppositely. I have shared some CSS animation-based snippets before in my blog, and if you are interested in the source code, check those out and download them. Without further explanation, I am providing the code so that you can use it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Stunning Split Screen Image Hover Effect</title>
	<link href="https://fonts.gstatic.com" rel="preconnect">
	<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="box">
		<div class="line">
			<span></span> <span></span> <span></span> <span></span> <span></span>
		</div>
		<div class="content">
			<h2>Split Screen</h2>
			<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci dolorem et iure nobis, voluptatem.</h4>
		</div>
	</div>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	background: darkgray;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Poppins', sans-serif;
	overflow: hidden;
}
.box {
	width: 600px;
	height: 400px;
	background: url(https://i.postimg.cc/BvT6sVXG/2.jpg);
	position: relative;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}
.box:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba(0, 0, 0, 0.92);
}
.box .line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
}
.box .line span {
	width: 20%;
	height: 100%;
	background: url(https://i.postimg.cc/BvT6sVXG/2.jpg);
	transition: 0.5s;
}
.box .line span:nth-child(1) {
	background-position: 0;
	transition-delay: 0s;
}
.box .line span:nth-child(2) {
	background-position: 25%;
	transition-delay: 0.1s;
}
.box .line span:nth-child(3) {
	background-position: 50%;
	transition-delay: 0.2s;
}
.box .line span:nth-child(4) {
	background-position: 75%;
	transition-delay: 0.3s;
}
.box .line span:nth-child(5) {
	background-position: 100%;
	transition-delay: 0.45s;
}
.box:hover .line>span {
	transform: translateY(-100%);
}
.box:hover .content {
	transform: translateY(0);
	transition: 1s;
	transition-delay: 0.1s;
}
.content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #fff;
	padding: 20px;
	width: 100%;
	height: 100%;
	transform: translateY(100%);
	text-align: center;
	box-sizing: border-box;
}
.content h2 {
	margin: 5px 0;
	text-transform: uppercase;
	color: gold;
	font-size: 40px;
}
.content h4 {
	width: 75%;
	line-height: 1.9;
}

Follow Us:

Stunning Split Screen Image Hover Effect

1 Comments

Post a Comment

Contact Form