Halo, jumpa lagi dengan saya, kali ini saya akan bagikan tutorial mengenai bagaimana Cara Membuat Efek Hover Konten Tersembunyi, Efek hover ini bisa kita jumpai di hampir semua website, dengan efek seperti maka konten bisa kita sembunyikan dan ditampilkan, Nah seperti apa cara membuatnya, berikut langkah-langkahnya.
Untuk membuat efek hover ini, kita buat 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 bisa buat konten nya bebas, setelah itu kita akan buat desainya dengan kode CSS3 berikut, untuk membuat efek hover konten ini kita gunakan properti CSS3 yakni visibility, kalian bisa 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 sudah semua kode diatas diketikan, selanjutnya simpan terlebih dahulu, kemudian coba jalankan di browser masin-masing dan lihat hasilnya. Maka nanti ketika kursor diarahkan pada kotak akan terlihat efek pada konten nya.
Baiklah sekian tutorial mengenai bagaimana Cara Membuat Efek Hover Konten Tersembunyi, semoga bermanfaat, amin.
Selamat mencoba.