Cara Membuat Efek Hover Element Div HTML

Selamat datang kembali sahabat Dumetschool pada website kursus webdesign. Dalam kesempatan kali ini saya akan membuat sebuah tampilan menggunakan element div html dengan memberikan efek hover. Baiklah agar tidak berlama-lama dalam penantian bagaimana kalau dimulai saja cara membuat efek hover element div html.

Sahabat pertama siapakan terlebih dahulu struktur HTML nya seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="kotak">
			<p>Marhaban ya Ramadhan</p>
		</div>
	</div>
</body>
</html>

Jadi pada file html saya hanya menggunakan tag <div> dan tag <p> bagaimana cukup mudah bukan sahabat.

langkah berikutnya tambahkan style css agar terlihat lebih menarik dan cantik, tampilannya berikut ini bisa sahabat ketikkan:

@import url('https://fonts.googleapis.com/css?family=Chewy');
body{
	padding:0;
	margin:0;
	background: #2676e9;
}

.container{
	width:300px;
	height: 300px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background: transparent;
	border:10px solid transparent;
	padding:10px;
	box-sizing: border-box;
	transition: -5s;
	box-shadow: none;
}

.kotak{
	background: #f3ecda;
	width:100%;
	height: 100%;
	box-sizing: border-box;
	transform: rotate(45deg) scale(1.2);
	border:10px solid #f7f06e;
	border-radius:50%;
	transition: -5s;
	box-shadow: 0 0 15px rgba(0,0,0,.5);
}

.kotak p{
	margin:0;
	padding:25px;
	text-align: center;
	font-family: 'Chewy', cursive;
	font-size:45px;
	color:#0f4955;
	box-sizing: border-box;
	transform: rotate(-45deg) translate(0px, 0px);
}

.container:before
{
	content:'';
	position: absolute;
	width:24px;
	height: 90%;
	background: #f7f06e;
	top:5%;
	left:50px;
	transition:.5s;
	opacity: 1;
	animation-delay: .3s;
	z-index:-1;
}

.container:after
{
	content:'';
	position: absolute;
	width:24px;
	height: 90%;
	background: #f7f06e;
	top:5%;
	right: 50px;
	transition:.5s;
	opacity: 1;
	animation-delay: .3s;
	z-index:-1;
}

.container:hover:before
{
	left:-37px;
	opacity: 1;
}

.container:hover:after
{
	right:-36px;
	opacity: 1;
}

.container:hover .kotak
{
	border-radius:0;
}

.container:hover
{
	background: #f3ecda;
	border:10px solid #e5c75a;
}

jika sudah sahabat bisa langsung save file dari html dan css tadi, sekarang coba jalankan pada browser masing-masing maka tampilannya seperti berikut ini:

gambar diatas belum ada efeknya bagaimana jika saat mouse di dekatkan atau di hover maka akan seperti ini tampilannya:

Demikian pembahasan artikel kali ini tentang cara membuat efek hover element div html, semoga bermanfaat dan sampai jumpa pada kesempatan lainnya.

terima kasih