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