Cara Membuat Efek Hover Caption

16/07/2018    Risman Hakim    1455     Website

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 :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More