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.

<body>
    <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.

@import url('https://fonts.googleapis.com/css?family=Marmelad');
.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 :)

16 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat