Cara Membuat Animasi Hover dengan CSS3
Cara Membuat Animasi Hover dengan CSS3 - Animasi pada tampilan website sangatlah dianjurkan penggunaan nya, karena dengan animasi membuat tampilan website akan semakin menarik dan tidak bosan untuk dilihat. Saat ini banyak sekali animasi yang bisa kita buat dengan mengguanakan berbagai bahasa program, Kali ini saya akan berbagi tutorial yang berhubungan dengan animasi yaitu bagaimana Cara Membuat Animasi Hover dengan CSS3. Animasi hover sangat populer sekali karena dengan hanya menggunakan sintak CSS3 kita sudah bisa membuat animasi hover. Baiklah berikut akan saya praktekan Cara Membuat Animasi Hover dengan CSS3.
Langkah 1 : Cara Membuat Animasi Hover dengan CSS3
Pada kasus ini kita akan membuat animasi pada sebuah gambar sebagai objeknya, maka dari itu silahkan kalian persiapkan satu buah gambar bebas atau bisa gunakan gambar berikut ini.
Setelah gambar tersedia, kita mulai dengan membuat struktur HTML sederhana untuk menampilkan gambar seperti berikut.
<div id="wrapper">
<div class="box">
<img src="image.jpeg"/>
<div class="caption">
<h3>- Your Caption -</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit."</p>
</div>
<a href="#"></a>
</div>
</div>
</body>
Langkah 2 : Cara Membuat Animasi Hover dengan CSS3
Setelah membuat struktur seperti diatas dan gambar sudah tampil, kita lanjutkan untuk membuat animasi hovernya. Tentu animasi yang akan kita buat dengan menggunakan CSS3, silahkan kalian ketikan sintak CSS3 untuk membuat animasi hovernya.
body {
color: #ffffff;
font-family: 'Love Ya Like A Sister', cursive;
}
#wrapper {
width: 400px;
padding: 10px;
margin: auto;
}
.box {
position: relative;
overflow: hidden;
margin: 10px 1%;
max-width: 420px;
line-height: 1.4em;
font-size: 16px;
border-radius: 20px 20px;
}
.box * {
box-sizing: border-box;
transition: all 0.50s ease;
}
.box img {
vertical-align: top;
}
.box .caption {
position: absolute;
top: calc(77%);
background-color: #25CCF7;
padding: 15px 25px 65px;
}
.box .caption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 100%;
height: 80px;
background-image: linear-gradient(to bottom, transparent 0%, #25CCF7 100%);
}
.box h3 {
margin: 0 0 20px;
font-size: 24px;
line-height: 35px;
}
.box p {
opacity: 0.9;
font-style: italic;
}
.box:hover .caption {
top: 80px;
}
Setelah semua sintak telah diketikan, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, ketika kalian arahkan kursor akan terjadi animasi sederhana pada objek gambarnya. Selesai
Bagaimana, cukup menarik bukan animasi yang ditampilkan ? Baiklah, cukup sekian tutorial mengenai bagaimana Cara Membuat Animasi Hover dengan CSS3, semoga bisa bermanfaat dan 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)
