Blog Request tutorial? klik disini!

  • Membuat Animasi Hover Hanya Dengan CSS3

    Ditulis oleh: Faizal Rafik
    1024 kali dibaca
    13 May / 2014 12:10

    Hallo teman-teman apa kabar semuanya mudah-mudahan sehat semuanya ya, amin.. Pada tutorial kali ini saya ingin mengajarkan bagaimana caranya membuat animasi efek hover sederhana hanya dengan bantuan CSS3. Animasi yang akan kita buat ini murni tanpa bantuan jQuery contohnya seperti berputar, zoom out dan zoom in, hanya dengan bantuan CSS kita juga dapat membuatnya dengan mudah. Nah efek-efek hover ini dapat berjalan dengan sempurna dibrowser-browser moderen sekarang ini. Terkecuali IE 8 karena harus ada tag CSS yang di tambahkan lagi. Disini saya akan memperlihatkan cara membuat efek hover sederhana pada gambar jadi apabila gambar tersebut kita hover maka akan muncul informasinya. Baiklah langsung saja kita praktekkan ya teman-teman.

    Pertama teman-teman bisa buat HTML nya seperti di bawah ini dimana semua isi text kita bungkus dengan class .item-hover :

    Nah di bawah ini adalah CSS untuk Efek Hovernya :

    Nah setelah semuanya di buat teman-teman bisa save dan lihat hasilnya.

    Kreasikan gaya efek hovernya sesuai kreatifitas teman-teman ya. Sekian dulu tutorial dari saya, semoga bermanfaat. Terima Kasih.

    Untuk melihat hasilnya di SINI dan DOWNLOAD Sourcenya.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155