Teknik Overlay CSS 3 (Video)

Teknik Overlay CSS 3 (Video)

Berikut ini adalah tutorial seputar overlay dengan menggunakan teknik hover pseudo css. Untuk tutorial selengkapnya teman-teman dapat melihat video berikut:

Teknik ini adalah penggabungan antara beberapa lapis (layer), yang dipadukan dengan Pseudo CSS Hover efek.

Untuk menguasai teknik ini harus memahami bagaimana pseudo css hover bekerja antar lapisan (layer).

Skrip html dan css

file index.html

<!DOCTYPE html>
<html>
<head>
	<title>Overlay CSS Effect</title>
	<link rel="stylesheet" type="text/css" href="overlay.css">

	<!-- FontAwesome CDN -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>

	<div class="wrap-img">
		<img src="pic.jpg">
		<div class="hover-overlay"></div>
		<div class="hover-sosmed">
			<a href="#">
				<i class="fab fa-facebook"></i>
			</a>
			<a href="#">
				<i class="fab fa-instagram"></i>
			</a>
			<a href="#">
				<i class="fab fa-youtube"></i>
			</a>
			<a href="#">
				<i class="fab fa-twitter"></i>
			</a>
		</div>
	</div>

</body>
</html>

file overlay.css

/* CSS RESET */
*{
	padding: 0;
	margin: 0;
}

/* wrap-img */
.wrap-img{
	/*background-color: green;*/
	height: 250px;
	width: 250px;
	margin: auto;
	position: relative;
	top: 50px;
	left: 0;
	border-radius: 100%;
	overflow: hidden;
}

.wrap-img img{
	width: 100%;
	transition: 0.5s ease-out;
}

.wrap-img:hover .hover-overlay{
	background-color: rgb(0, 0, 0, 0.4);
	transition: 0.5s ease-out;
}

.hover-overlay{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.5s ease-out;
}

.wrap-img:hover img{
	transform: scale(1.2);
	transition: 0.5s ease-out;
}

.hover-sosmed{
	opacity: 0;
	/*background-color: brown;*/
	height: 50px;
	width: 100%;
	position: absolute;
	top: 60%;
	left: 0;
	text-align: center;
	transition:  0.7s ease-out;
}

.wrap-img:hover .hover-sosmed{
	transform: translate(0, -50%) translate(0, 0);
	transition:  0.7s ease-out;
	opacity: 1;
}

/* Social Media Style */
.hover-sosmed a{
	text-decoration: none;
	color: #ffffff;
	margin-right: 20px;
}

.hover-sosmed .fab{
	font-size: 25px;
}

sumber referensi:

https://www.w3schools.com/cssref/sel_hover.asp

https://www.w3schools.com/css/css_pseudo_classes.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover