Membuat Image Hover dengan Split Effect menggunakan HTML dan CSS

Membuat Image Hover dengan Split Effect menggunakan HTML dan CSS – Pada artikel ini kita akan membahas bagaimana membuat image hover dengan split effect menggunakan HTML dan CSS. Seperti pada tutorial sebelumnya tentang pembuatan efek menggunakan HTML dan CSS, disini kita akan membuat dua buah file yaitu index.html dan style.css. Source code pada masing-masing file dapat dilihat berikut ini.

Pada file style.css anda dapat menyalin kode berikut pada komputer/laptop yang anda gunakan.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	margin: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #eee;
}

.container{
	width: 400px;
	height: 300px;
	position: relative;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	cursor: pointer;
	border-radius: 3px;
	overflow: hidden;
}

.details,.image{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.image{
	display: flex;
	perspective: 1500px;
}

.details{
	background-color: #ff5b64;
}

h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	text-transform: initial;
	white-space: nowrap;
}

li{
	width: 50%;
	height: 100%;
	list-style: none;
	background: url("https://images.freeimages.com/images/large-previews/540/dandelion-37-1388001.jpg") no-repeat;
	background-size: cover;
}

.part1{
	transition: all 0.5s;
	transform-origin: left;
}

.part2{
	background-position: -200px;
	transition: all 0.5s;
	transform-origin: right;
}

.container:hover .part1{
	transform: rotateY(98deg);
}

.container:hover .part2{
	transform: rotateY(-98deg);
}

Sedangkan, untuk file index.html dapat dilihat sebagai berikut.

<!DOCTYPE html>
<html>
<head>
	<title>Image Hover With Split Effect</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="details">
			<h1>Inpows<br>Visit: inpow.com<br>Instagram: @inpows</h1>
		</div>
        <ul class="image">
            <li class="part1"></li>
            <li class="part2"></li>
        </ul>
	</div>
</body>
</html>

Saat dijalankan akan memperlihatkan hasil seperti video berikut ini.

Baca juga artikel lainnya mengenai programming hanya di inpows.com