Cara Membuat Efek Hover Caption
Cara Membuat Efek Hover Caption - Hover merupakan suatu properti CSS yang bisa kita manfaatkan dalam menambahkan efek terhadap suatu elemen ataupun objek, misalnya saja kita dapat menambahkan efek rotasi, perubahan warna, jenis huruf ataupun efek yang lainnya. Nah pada kesempatan kali ini saya akan bagikan tutorial sederhana tentang efek yakni bagaimana Cara Membuat Efek Hover Caption. Penasaran seperti apa cara membuatnya, langsung saja simak langkah - langkah berikut ini.
Langkah 1 : Cara Membuat Efek Hover Caption
Baik kita mulai langkah pertama dengan mengetikan sintak HTML sederhana sebagai struktur awal untuk menambahkan konten caption dan gambar.
<div class="container">
<div class="content">
<div class="img">
<img src="photo.jpg">
</div>
<div class="text">
<h3>Be a strong...</h3>
</div>
</div>
</div>
</body>
Langkah 2 : Cara Membuat Efek Hover Caption
Setelah membuat struktur seperti diatas, langkah berikutnya untuk membuat efek hover caption tentu kita akan memanfaatkan sintak CSS untuk efek hovernya, untuk itu silahkan ketikan sintak CSSnya berikut ini.
.container {
display: flex;
justify-content: center;
}
.content {
position: relative;
width: 400px; height: 300px;
overflow: hidden;
cursor: pointer;
border: 5px double #E68804;
background: #0a112e;
}
.content img {
width: 100%;
opacity: 0.25;
transition: all 0.4s ease-in-out;
}
.content .text {
position: absolute;
top: 50%;
left: 30px;
right: 30px;
transform: rotate(0deg) translateY(-50%) scale(1);
transition: all 0.4s ease-in-out;
}
.content .text:before {
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 2px;
position: absolute;
left: 0; top: 0;
content: "";
display: block;
transition: all 0.35s ease-in-out;
}
.content .text:after {
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 2px;
position: absolute;
right: 0; bottom: 0;
content: "";
display: block;
transition: all 0.35s ease-in-out;
}
.content .text h3 {
font-family: 'Marmelad', sans-serif;
font-size: 26px;
line-height: 7px;
text-align: center;
color: #fff;
}
.content:hover img {
opacity: 0.8;
}
.content:hover .text {
transform: rotate(-32deg) translateY(-50%) scale(0.9);
}
.content:hover .text:before {
width: 200%;
}
.content:hover .text:after {
width: 200%;
}
Setelah semua sintak CSS dan HTML telah diketikan, langkah terakhir simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya. Maka ketikan kita mengarahkan kursor terhadap gambar akan terdapat efek yang terjadi pada captionnya. Selesai
Baiklah, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Efek Hover Caption, semoga bermanfaat dan menambah referensi dalam membuat efek dan animasi dengan CSS, sampai jumpa lagi pada tutorial selanjutnya. Selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
