Membuat Animasi Overlay dengan CSS

07/03/2018    Risman Hakim    212     Website

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

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