Membuat image melompat


Dengan CSS3 Anda sekarang dapat membuat animasi pada elemen html Anda.

Mari kita membuat CSS Image ‘Melayang’ sewaktu Mouse Hover.

Ini dilakukan dengan menggunakan fitur baru transition untuk mengubah properti margin dari 18px ke 2px dan akan mengambil 0,5 detik untuk melakukan tindakan ini.

Berikut ini adalah kodenya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
img.hoverImages {
    margin:20px;
    padding:3px;
    outline:2px solid #DDD;
    border:#a1a1a1;
    float:left;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
 
img.hoverImages:hover {
    cursor:pointer;
    margin-top: 2px;
}

Image yang akan dibuat ‘Melayang’

1
2
3
<img class="hoverImages" src="/image.jpg" />
<img class="hoverImages" src="/image2.jpg" />
<img class="hoverImages" src="/image3.jpg" />

Berikut demonya (hover mouse pada image di bawah ini):

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s