Selamat datang di: www.jual-rebanamarawis.com ( PUTRA PENDAWA )
Toko / Jual Alat Musik Online dan COD (Cash On Delivery)
Contact Person : Ahmad Royani, ST
TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)
PIN BB : 2B4A736C
Home » , , » 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



Share this article :

0 komentar:

TOKO PUTRA PENDAWA

Contact Person : Ahmad Royani, ST


  • TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)


  • Alamat : Perumahan Griya Asri Camar A - 18, Kp. Raden RT/RW: 03/07 Kel. Jati Raden Kec. Jati Sampurna Kota Bekasi Jawa Barat KP 17433
  • Klik PETA LOKASI PUTRAPENDAWA
  • Sedia Layanan Antar & bayar di tempat khusus wil Jakarta, Bogor, Depok, Tangerang dan Bekasi (Jabodetabek) dan Sekitarnya
    Terima Jasa Servis / Perbaikan
  •  
    Copyright © 2013. JUAL ALAT MUSIK MARAWIS & REBANA - All Rights Reserved
    Template Created by Mas Template Supported by jual kostum marawis & alat drum band
    Proudly powered by Blogger |