Membuat Animasi Overlay dengan CSS
Membuat Animasi Overlay dengan CSS - Banyaknya bahasa pemrograman saat ini membuat kita lebih mudah dalam menciptakan sesuatu baik dari segi front-end maupun back-end tergantung bahasa yang digunakan. Salah satu yang paling populer untuk membuat design adalah CSS, CSS merupakan bahasa yang bertugas untuk mengontrol tampilan pada halaman website. Dengan CSS kita bisa menentukan layout, warna, efek serta animasi sederhana. Berbicara mengenai animasi di CSS, berikut ini akan saya bagikan referensi dan juga tutorialnya mengenai bagaimana Membuat Animasi Overlay dengan CSS. Baiklah langsung saja kita akan praktekan membuat animasi overlaynya.
Langakah 1 : Membuat Animasi Overlay dengan CSS
Sebelum memulai mengetikan sintak - sintak, silahkan kalian siapkan terlebih dahulu 4 gambar dengan ukuran 200 x 200 pixel sebagai bahan animasi overlaynya. Setelah itu barulah kita ketikan sintak - sintak untuk membuat animasi overlay, sintak yang pertama adalah membuat struktur terlebih dahulu dengan sintak HTML berikut ini.
<div id="container">
<div id="garfield" class="image"></div>
<div id="jerry" class="image"></div>
<div id="mickey" class="image"></div>
<div id="thomas" class="image"></div>
</div>
</body>
Langakah 2 : Membuat Animasi Overlay dengan CSS
Selanjutnya, untuk membuat animasi overlay, kita akan gunakan sintak CSS berikut agar animasi berjalan dengan baik.
#container {
width: 500px;
margin: auto;
font-family: 'Berkshire Swash', cursive;
font-size: 24px;
}
.image {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 0 100px inset, 0 0 5px grey;
transition: box-shadow 1s;
float: left;
margin: 10px;
border-radius: 50%;
}
.image::after {
width: 80%;
height: 80%;
color: white;
border: 2px solid;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 1s .5s;
}
.image:hover {
box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
transition: box-shadow 1s;
}
.image:hover::after {
opacity: 0;
transition: opacity .5s;
}
#garfield {
background-image: url(images/garfiled.jpg);
color: rgba(255, 169, 24, 1);
}
#jerry {
background-image: url(images/Jerry.jpg);
color: rgba(211, 148, 55, 1);
}
#mickey {
background-image: url(images/mickeyMouse.jpg);
color: rgba(252, 25, 34, 1);
}
#thomas {
background-image: url(images/thomas.jpg);
color: rgba(161, 161, 161, 1);
}
#garfield::after {content: 'Garfield';}
#jerry::after {content: 'Jerry';}
#mickey::after {content: 'Mickey';}
#thomas::after {content: 'Thomas';}
Setelah semua sintak diketikan, simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka akan terlihat seperti gambar dibawah ini.
Baik, cukup sekian tutorial sederhana Membuat Animasi Overlay dengan CSS, semoga tutorial ini bisa bermanfaat dan bisa menambah referensi dalam membuat animasi, 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)
