Membuat Efek Info Menggunakan Hover Dengan CSS

Halo teman-teman pada kesempatan kali ini saya akan membahas Cara Membuat Efek Info Menggunakan Hover Dengan CSS. Seperti apa sih efek info menggunakan hover?

Efek Info Hover adalah dimana misalnya kita mempunyai gambar lalu pada saat kita menghover atau mengarahkan kursor terhadap gambar tersebut, maka akan ada informasi dari gambar tersebut. Bagamana cara membuatnya? Kita langsung saja ya mempraktekkannya

Contoh

Saya akan membuat sebuah efek info hover pada sebuah gambar, dan saya akan membuat infonya

<div class="gambar">
    <img src="images/gambar.png"/>

	<div class="info">
    <h3>Nama Gambar</h3>
    <p>ed ut perspiciatis unde omnis iste natus error sit
    voluptatem accusantium doloremque laudantium, totam remaperiam
    </p>
    <a href="">Read More</a>
</div>
</div>

Lalu kita akan mengatur desain dari gambar dan infonya tersebut menggunakan CSS

<style>
*{padding:0; margin:0;}
.gambar {height:200px; width:200px; margin:auto;}
.gambar img {height:200px; width:200px;}

.info{height:200px; width:200px; background-color:rgba(0, 0, 0, 0.70);
text-align:center;
}
</style>

Dan untuk Mempercantik infonya bisa kita tambahkan di CSS seperti dibawah ini, namun teman-teman dapat mendesainnya sesuka kalian

.info h3, .info p {padding:10px 0; color:#FFF;}
.info a{background-color:lightblue; text-decoration:none; color:#FFF; padding:10px 25px;}

Nah untuk sementara hasilnya akan seperti ini

Agar gambar dan info menjadi atas bawah atau info menimpa gambar, teman-teman tambahkan position pada CSSnya

.gambar {height:200px; width:200px; margin:auto; position:relative;}
.gambar img {height:200px; width:200px;}

.info{height:200px; width:200px; background-color:rgba(0, 0, 0, 0.70);
text-align:center; position:absolute; left:0; top:0;}

Nah teman-teman kenapa .gambar itu positionnya relative karna .gambar itu adalah parentnya yang akan di timpah dengan .info. sehingga position untuk .info itu absolute, dan jangan lupa juga untuk atur posisi left dan top menjadi nol agar info dan gambar benar-benar pas sejajar
Lalu kita akan menambahkan transform dan mengatur transitionnya, menjadi seperti dibawah ini

*{padding:0; margin:0;}
.gambar {height:200px; width:200px; margin:auto; position:relative; overflow:hidden;}

.info{height:200px; width:200px; background-color:rgba(0, 0, 0, 0.70);
text-align:center; position:absolute; left:0; top:0; opacity:0; transform:translateY(200px);}

.gambar:hover .info{opacity:1; transform:translateY(0); transition:all 0.5s ease}

Kita beri overflow hidden pada .gambar agar pada saat kita tidak menghover gambar, kotak info tidak terlihat

Nah Hasilnya seperti ini ya teman-teman

Jadi pada saat kita menghover atau mengarahkan kursor kita ke gambar, maka kotak info akan muncul. Mudah ya teman-teman. Semoga bermanfaat

Membuat Efek Info Menggunakan Hover Dengan CSS

Contoh

Kategori