Cara membuat efek hover slide to bottom atau ke bawah
Hallo teman-teman, salam jumpa kembali…
Di artikel kali ini penulis ingin membahas panduan Cara merancang efek hover slide to bottom atau ke bawah. Seketika aja ya kita bahas cara pembuatannya…
Cara merancang efek hover slide to bottom atau ke bawah Pertama-tama teman-teman bikin dulu tampilan menu-nya di HTML, seperti contoh di bawah ini. Teman-teman dapat copy kodingan yang penulis bikin 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>
<fitur>
<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>
</fitur>
</div>
</div>
</header>
</div>
</body>
</html>
Cara merancang efek hover slide to bottom atau ke bawah Nah, di kodingan di atas kita telah merancang sebuah fitur di HTML. Di kodingan di atas penulis merancang 5 fitur, dengan tampilan fitur berupa icon gambar sosial media seperti facebook, twitter, google+, linkedin, dan rss.
Kira-kira tampilan-nya seperti gambar di bawah ini :
Tampilan fitur
Cara merancang efek hover slide to bottom atau ke bawah Nah, berikutnya kita akan merancang CSS bagi animasi ketika di hover di alternatif fitur. Teman-teman silahkan copy kodingan CSS yang penulis bikin 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 fitur {
position: absolute;
margin-left: 200px;
}
header .header .right fitur li {
list-style: none;
margin-right: 12.5px;
float: left;
}
header .header .right fitur li a img {
transition: 0.5s;
}
header .header .right fitur 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 merancang efek hover slide to bottom atau ke bawah Sekiranya telah, silahkan teman-teman coba ya bagi lihat efek animasi hover-nya. Kira-kira hasilnya seperti gambar dibawah ini :
Tampilan ketika belum di hover :
Tampilan ketika di hover :
Sekianlah dulu ya teman-teman artikel kali ini, selamat mencoba ya… ^_^
Sumber https://kursuswebsite.org
