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.

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

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

Membuat Animasi Overlay dengan CSS

Baik, cukup sekian tutorial sederhana Membuat Animasi Overlay dengan CSS, semoga tutorial ini bisa bermanfaat dan bisa menambah referensi dalam membuat animasi, selamat mencoba :)

7 Maret 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat