Membuat Hover Full Width di CSS

Hover adalah efek di CSS ketika mouse kita berada di atasnya maka efek tersebut berjalan. Nah kali ini saya akan berbagi sedikit tips bagaimana cara Membuat Hover Full Width di CSS. Langsung saja kita praktekan yah teman-teman.

pertama kita siapkan gambar-gambar nya terlebih dahulu, ada sepuluh gambar yang harus kalian siapkan dan gambar tersebut harus berukuran 1200 x 840 pixel. kalian bisa cari di google gambar tersebut. LIhat contoh

Lalu kalian siapan text editor dan ketikan kode HTML di bawah ini, beri nama index.html.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hover</title>
</head>
<body>
	<div class="container">
		<menu>
			<ul>
				<li><a href="">Hover Me</a>
					<ul>
						<li><img src="jk3.jpg" alt=""></li>
						<li><img src="jk2.png" alt=""></li>
						<li><img src="jk4.jpg" alt=""></li>
						<li><img src="jk.jpg" alt=""></li>
						<li><img src="jk5.jpg" alt=""></li>

						<li><img src="jk6.jpg" alt=""></li>
						<li><img src="jk10.png" alt=""></li>
						<li><img src="jk7.jpg" alt=""></li>
						<li><img src="jk9.jpg" alt=""></li>
						<li><img src="jk8.jpg" alt=""></li>
						<li><h1>Hover Full Width</h1></li>	
					</ul>
									
				</li>
			</ul>
		</menu>
		
	</div>
</body>
</html>

jangan sampai keliru memasukan nama gambar nya yah teman-teman, harus sesuai dengan gambar yang sudah kalian siapkan tadi. contohnya kode di bawah ini.

<li><img src="jk3.jpg" alt=""></li>
<li><img src="jk2.png" alt=""></li>
<li><img src="jk4.jpg" alt=""></li>
<li><img src="jk.jpg" alt=""></li>
<li><img src="jk5.jpg" alt=""></li>

<li><img src="jk6.jpg" alt=""></li>
<li><img src="jk10.png" alt=""></li>
<li><img src="jk7.jpg" alt=""></li>
<li><img src="jk9.jpg" alt=""></li>
<li><img src="jk8.jpg" alt=""></li>
<li><h1>Hover Full Width</h1></li>

lalu ketikan link css setelah tag title, lihat contoh:

<link rel="stylesheet" href="style.css">

buat file css dan beri nama style.css dan masukan kode css di bawah ini

*{margin:0; padding: o;}
.container{
	margin: auto;
	background: #1abc9c;
}
menu{
	width: 960px;
	background: #666;
	margin: auto;
	padding: 20px;
	height: 20px;
}
ul{
	list-style: none;
}
ul li a{
	color: white;
	text-decoration: none;	
	padding: 10px;
}
ul li ul{
	display: none;
}
menu > ul > li:hover {
	background: #1abc9c;
	display: inline-block;
	transition: background 1s;
}
ul li:hover ul{
	display: block;
	width: 100%;
	height: 70%;
	background: #2c3e50;
	padding: 50px;
	position: absolute;
	left: 0px;
}
ul li:hover ul li img{
	padding-right: 10px;
	margin-bottom: 10px;
	float: left;
	width: 18%;
	height: 100%;
}
ul li:hover ul li h1{
	text-align: center;
	 font-family: sans-serif; 
	color: #fff;
	text-decoration: underline;
}

sekian tutorial Membuat Hover Full Width di CSS, semoga bermanfaat.

Keep Coding :D.

Kategori