Cara membuat efek hover slide to bottom atau ke bawah

Hallo teman-teman, salam jumpa kembali…

Pada artikel kali ini penulis ingin membahas tutorial Cara membuat efek hover slide to bottom atau ke bawah. Langsung aja ya kita bahas cara pembuatannya…

Cara membuat efek hover slide to bottom atau ke bawah Pertama teman-teman buat dulu tampilan menu-nya di HTML, seperti contoh di bawah ini. Teman-teman bisa copy kodingan yang penulis buat di bawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Contoh hover slide to bottom</title>
	<link rel="stylesheet" type="text/css" href="targeted.css">
</head>
<body>
<div class="container">
	<header>
		<div class="header">
			<div class="right">
				<menu>
					<li><a href=""><img src="image/social_facebook.png"></a></li>
					<li><a href=""><img src="image/social_twitter.png"></a></li>
					<li><a href=""><img src="image/social_googleplus.png"></a></li>
					<li><a href=""><img src="image/social_linkedin.png"></a></li>
					<li><a href=""><img src="image/social_rss.png"></a></li>
				</menu>
			</div>
		</div>
	</header>
</div>
</body>
</html>

Cara membuat efek hover slide to bottom atau ke bawah Nah, pada kodingan di atas kita sudah membuat sebuah menu pada HTML. Pada kodingan di atas penulis membuat 5 menu, dengan tampilan menu berupa icon gambar sosial media seperti facebook, twitter, google+, linkedin, dan rss.

Kira-kira tampilan-nya seperti gambar di bawah ini :

Tampilan menu

Cara membuat efek hover slide to bottom atau ke bawah Nah, selanjutnya kita akan membuat CSS untuk animasi saat di hover pada pilihan menu. Teman-teman silahkan copy kodingan CSS yang penulis buat di bawah ini :

/*Start header*/
header {
	width: 100%;
	background-color: #1F1F1F;
	position: fixed;
}
header .header {
	max-width: 800px;
	height: 35px;
	margin: auto;
	overflow: hidden;
	padding: 10px 0;
}
header .header .right {
	width: 400px;
	float: right;
}
header .header .right menu {
	position: absolute;
	margin-left: 200px;
}
header .header .right menu li {
	list-style: none;
	margin-right: 12.5px;
	float: left;
}
header .header .right menu li a img {
	transition: 0.5s;
}
header .header .right menu li a img:hover {
	padding-top: 50px;
	background-color: lightgreen;
	border-radius: 0 0 100px 100px;
	box-shadow: 0px 0px 5px 2px lightgreen;
}
/*End header*/

Cara membuat efek hover slide to bottom atau ke bawah Jika sudah, silahkan teman-teman coba ya untuk lihat efek animasi hover-nya. Kira-kira hasilnya seperti gambar dibawah ini :

Tampilan saat belum di hover :

Tampilan saat di hover :

Sekian dulu ya teman-teman artikel kali ini, selamat mencoba ya… ^_^

Cara membuat efek hover slide to bottom atau ke bawah

Kategori