Membuat Animasi Hover Hanya Dengan CSS3

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.