Cara Membuat Efek Hover Konten Tersembunyi
Halo, jumpa lagi dengan saya, kali ini saya akan share panduan mengenai bagaimana Cara Membangun Efek Hover Konten Tersembunyi, Efek hover ini dapat kita jumpai di hampir segala situs, dengan efek seperti karenanya konten dapat kita sembunyikan dan ditampilkan, Nah seperti apa cara membuatnya, berikut langkah-langkahnya.
Bagi membangun efek hover ini, kita bikin dulu struktur HTML seperti berikut.
<a class=bg>
<div class=content>
<h1>Lorem Ipsum is...</h1>
<p class=description>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</a>
Silahkan kalian dapat bikin konten nya bebas, setelah itu kita akan bikin desainya dengan kode CSS3 berikut, bagi membangun efek hover konten ini kita gunakan properti CSS3 yakni visibility, kalian dapat ketikan kodenya berikut ini.
a.bg {
color: #fff;
background-color: #00A1CB;
display: block;
width: 400px;
height: 250px;
position: relative;
cursor: pointer;
margin: auto;;
}
.content {
position: absolute;
bottom: 40px;
right: 0;
top: 0;
margin: auto;
padding: 0 4em;
height: 3em;
transition: all .2s ease;
}
a:hover .content {
height: 8em;
transition: all .2s ease;
}
h2 {
font-size: 2em;
margin: 0 0 5px 0;
}
p {
visibility: hidden;
margin: 5px;
line-height: 1.5em;
}
a:hover p{
height: 3em;
opacity: 1;
visibility: visible;
transition: all .2s ease;
}Kalau telah segala kode diatas diketikan, berikutnya simpan terlebih dahulu, kemudian coba jalankan di browser masin-masing dan lihat hasilnya. Karenanya nanti ketika kursor diarahkan di kotak akan terlihat efek di konten nya.
Baiklah demikian panduan mengenai bagaimana Cara Membangun Efek Hover Konten Tersembunyi, semoga bermanfaat, amin.
Selamat mencoba.
Sumber https://kursuswebsite.org
