Membuat Animasi Album Preview dengan CSS3

Sejak ada CSS3, membuat animasi dalam website kelihatan sangat mudah dibuat. Berbeda dengan sebelum ada CSS3, animasi yang terlihat wah ternyata memang cukup sulit dibuat dan memakan banyak memori. Beruntunglah, sekarang ini ada CSS3.

Kali ini kita akan mencoba membuat animasi untuk album preview. Menarik sekali kan? Susah tidak buatnya? Tidaaak. Karena kita sudah disiapkan oleh library hehe. Jadi kita hanya tinggal memanggil class-nya saja dan secara otomatis album fotonya akan terlihat animasinya. Hihi langsung ikuti saja ya.

Pertama buat dulu struktur HTML-nya seperti ini :

Contoh ini yang tadi pagi sudah saya coba ya :D

<div class="albums">
    <div class="albums-tab">
        <div class="albums-tab-thumb sim-anim-1">
            <img src="img/adam-levine (1).jpg" class="all studio"/>
            <img src="img/adam-levine (2).jpg" class="all studio"/>
            <img src="img/adam-levine (3).jpg" class="all studio"/>
            <img src="img/adam-levine (4).jpg" class="all studio"/>
            <img src="img/adam-levine (5).jpg" class="all studio"/>
        </div>
    </div>
    <div class="albums-tab-text">.sim-anim-1 <span>(5 pictures)</span></div>
</div>

Lalu buat CSS-nya :

.albums-tab-thumb{
    float: left;
    width: 300px;
}
.albums-tab-thumb img {
    height: auto;
    width: 290px;
    background-color: rgba(255,255,255,1);
    padding: 5px;        
}

Dan jangan lupa panggil library CSS-nya seperti berikut :

<link rel="stylesheet" type="text/css" href="album-preview-animations/_css/sim-prev-anim.css">

Save dan coba jalankan di browser. Akan terlihat efek animasi saat album di-hover.

DOWNLOAD | DEMO

11 Maret 2015

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat