Tips Dan Trik Seputar Bisnis Online dan Internet Marketing

Cara Membuat Gallery Hover Images Dengan CSS3

gallery hover imagesDengan menggunakan versi terbaru dari CSS yaitu CSS3 anda dapat membuat suatu images gallery dengan hover images mirip menggunakan Jquery.

Keunggulan dari CSS3 ini apabila user sedang mengakses website atau blog tanpa menghidupkan javascript pada browser dan biasanya wartel-wartel menonaktifkan fasilitas dari javascript pada browser, maka tampilan dari website anda yang mengandalkan Jquery akan hilang tanpa berarti.

Salah satu tambahan dari CSS3 ini adalah anda bisa membuat efek Glow Shadow atau efek shadow yang mengelilingi dari gambar/images yang mana jika anda menggunakan CSS2 maka untuk membuat efek Glow Shadow anda perlu membuat image terlebih dahulu.

Coba anda perhatikan efek dari Hover Images ini dengan menggunakan CSS3

 

Pada gambar awal diberi efek opacity, jika mouse diletakkan diatas gambar maka efek akan bekerja dengan membuat gambar menjadi membesar dengan diberi Glow Shadow dikeliling tepi gambar.
Pembesaran anda bisa memberi transition duration dalam detik.
Semua ini murni dengan menggunakan CSS3 tanpa Jquery dan anda bisa mencoba menonaktifkan javascript lalu anda coba kembali dan semua efek masih berjalan normal dan jika anda menjalankan website saya dengan menggunakan jquery disini maka semua efek javascript tidak berjalan.
Untuk mendapatkan scriptnya anda bisa mendownloadnya atau sudah saya sertakan dibawah ini :
File HTML :

File CSS :

Untuk menggabungkan antara file HTML dan CSS anda bisa membuat link dan tempatkan diantara <head>…</head> pada website anda.

<link href=”css/style.css” rel=”stylesheet” type=”text/css”/>

Selamat mencoba untuk membuat Efek pada images gallery anda dengan memanfaatkan fasilitas dari CSS3


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang

Kiriman oleh : Google FeedBurner

 

3 Comments
  1. Terimakasih pak rudy. Tutorial bermanfaat sekali buat saya. Dan semoga bisa bermanfaat untuk murid” saya.thank’s pak rudy

    Salam sukses pak rudy

  2. Sama-sama pak…

    Semoga sukses juga…!

  3. Weww…Thanks Pak, info yang keren…hehehe

Leave a Reply



*