JUAL ALAT MUSIK MARAWIS & REBANA

Pengrajin, Distributor & Toko Alat Musik Rebana, Marawis, Hadroh, Gendang, Jimbe, Drum Band, Marching Band, jual di Jakarta Bogor Depok Tangerang Bekasi dan Wilayah Lainnya

TOKO PUTRA PENDAWA

Toko / Jual Alat Musik Online
Sedia layanan COD (Cash On Delivery) untuk wilayah
Jakarta Bogor, Depok, Tangerang, Bekasi dan sekitarnya

  • BERANDA
  • DRUM BAND
    • DRUM BAND TK
    • DRUM BAND SD
    • DRUM BAND SMP/SMA
    • PRODUK DRUM BAND
  • MARCHING BAND
    • MARCHING BAND TK
    • MARCHING BAND SD
    • MARCHING BAND SMP
    • MARCHING BAND SMA
    • SPEC MARCHING BAND
  • MARAWIS
    • MARAWIS POLOS
    • MARAWIS POLOS EKSKLUSIF
    • MARAWIS BATIK
    • MARAWIS UKIR
    • SPEC PRODUK MARAWIS
  • REBANA QOSIDAH
    • REBANA QOSIDAH POLOS
    • REBANA QOSIDAH RUMBAI
    • REBANA QOSIDAH UKIR
  • HADROH / GENJRING
    • REBANA HADROH
    • BASS HADROH
    • PAKET HADROH
    • ALAT HADROH
  • ANEKA PRODUK
    • BEDUG
    • GAMELAN / DEGUNG
    • ANGKLUNG
    • DRUM KIT / DRUM SET
    • JIMBE
    • TABLA
    • DUMBUK/DARBUKA
  • LAGU
Beranda » CSS Dasar » HTML Dasar » Tutorial Blogspot » Cara Membuat Gambar Animasi dengan Efek Hover CSS

Cara Membuat Gambar Animasi dengan Efek Hover CSS

Pada postingan kali ini saya akan berbagi tips cara membuat gambar animasi dengan efek hover pada gambar menggunakan CSS.

Agar nampak seperti gambar animasi, kita harus membuat dua buah gambar yang ukurannya identik, yang akan ditampilkan scara bergantian dengan menggunakan kode CSS yaitu dengan image link dan image hover, jadi gambar yang pertama akan ditampilkan sebagai link dan gambar yang kedua ditampilkan sebagai hover/ jika gambar di dekati mouse.

Untuk membuat efek tersebut, kali ini saya akan menjelaskan berikut contoh - contohnya sebagai berikut:
  • Mempersiapkan 2 buah gambar yang identik, contoh:
    Contoh Gambar 1

    Contoh Gambar 2
  • Copy dan pastekode CSS berikut ke dalam postingan tapi dalam keadaan mode "HTML" bukan mode "Compose" :
    <style type="text/css">
    .gambar a {
       float:left;
       display:block;
       background:transparent url(http://3.bp.blogspot.com/-rKaiyKBYUiI/T9wqgDX0v4I/AAAAAAAABlo/xvFCZ0GXiG0/s400/GAMBAR-1.jpg) 0 0 no-repeat;
    }
    .gambar a:hover{
       border-bottom:none;
       outline:none;
       background:transparent url(http://1.bp.blogspot.com/-I9ud-SoaGdQ/T9wqgWfdYMI/AAAAAAAABl0/7O7EyVeYFrc/s400/GAMBAR-2.jpg) 0 0 no-repeat;
    }
    </style>
  • Masukkan kode HTML berikut untuk menampilkan Gambarnya
    <div class="gambar">
    <a href='http://www.jual-rebanamarawis.com'></a>
    </div>
  • Lihat pratinjau postingan, kemudian siap untuk dipublish
Hasilnya akan tampak seperti gambar berikut:



Keterangan:
  • Kode  yang berwarna Merah diganti dengan alamat URL yang akan ditampilkan untuk Gambar Link, pada saat mosu tidak berada di atas gambar.
  • Kode  yang berwarna Merah diganti dengan alamat URL yang akan ditampilkan untuk Gambar Hover / gambar yang ditampilkan pada saat mosu diletakkan diatas gambar
  • Kode yang berwarna ungu diganti dengan Link tujuan, atau alamat url yang akan dibuka jika gambar di klik
  • Atribut  seperti posisi, border, ukuran, dan outline imagedapat diedit sesuai dengan kebutuhan
Demikian postingan kali ini mengenai  cara membuat gambar animasi dengan efek hover pada gambar menggunakan CSS. semoga bermanfaat.

Tutorial Blogspot

  1. Cara Kompres CSS, HTML, JavaScript Template Blog
  2. Cara Kompressi Gambar Agar Loading Blog Cepat
  3. Cara Membuat Blockquote pada Posting Blog dengan CSS 
  4. Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog



Tweet

Produk keren lainnya:

Ditulis oleh Putra Pendawa pada tanggal 16/06/12
Posting Lebih Baru
Posting Lama
Beranda

TOKO PUTRA PENDAWA BEKASI

KONTAK CS:

HP/SMS/WA: 08561452465 / 085286352611


Alamat : Perumahan Griya Asri Camar A - 18, Kp. Raden RT/RW: 03/07 Kel. Jati Raden, Kec. Jatisampurna ( masuk dari Jalan Raya Kranggan - Pondok Gede, Gang Camar) Kota Bekasi Jawa Barat

LIHAT LOKASI DI GOOGLE MAP







BANK TRANSFER


  • bca rebana marawis
    BCA No. Rek : 6870642375
    a.n. Ahmad Royani, ST

  • mandiri trf marawis
    MANDIRI No. Rek : 167 000 1186 708
    a.n. Ahmad Royani, ST

STAT WEB JUAL ALAT MARAWIS

Music Blogs
blog search engine
Copyright © 2012 JUAL ALAT MUSIK MARAWIS & REBANA - Powered by Blogger
Support JUAL ALAT DAN KOSTUM MARAWIS,DRUM BAND & MARCHING BAND
Template by Mas Sugeng - Versi Seluler