Kumpulan Efek Hover Pada Gambar dengan CSS3

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Kumpulan Efek Hover Pada Gambar dengan CSS3 dan semoga artikel ini bermanfaat.

---

Ada banyak cara menghias blog slah satunya yaitu membuat Efek Hover/saat disorot mouse pada link atau gambar, dengan efek hover ini tentunya akan menjadikan blog kita lebih hidup dan akan membuat para pengunjung blog kita jadi betah berlama-lama berada di blog kita. namun jangan salah diantara efek-efek tersebut tentu diantaranya dapat membuat terganggunya pandangan terhadap tulisan-tulisan kita terutama pada efek gambar.
Nah untuk para blogger yang mau memasang efek hover saat ini saya akan berbagi beberapa efek hover dan silahkan para blogger pilih sesuai dengan kesukaan.

Cara Memasang efek Gambar

sebenarnya efek ini sangat menggangu pengunjung yang sedang membaca postingan kita. Tetapi mungkin diantara para blogger menyukai efek ini,  silahkan arahkan mouse anda pada gambar disamping untuk melihat efek ini, dan bagi yang suka efek ini ikuti langkah berikut.

• Login blogger
• Pergi ke Edit HTML
• Beri ceklist pada Expand Widget Templates
• Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>

1. Efek Gambar Bergoyang

.post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}
.post img:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

2. Efek Gambar Membesar

.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

3. Efek Gambar berbayangan

.post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

4. Efek Gambar Berubah Bentuk

.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

5. Efek Gambar Berputar

.post img{
    transition:all 1.2s ease-out; 
    -o-transition:all 1.2s ease-out; 
    -moz-transition:all 1.2s ease-out; 
    -webkit-transition:all 1.2s ease-out; 
} 
.post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);  
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); 
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Kumpulan Efek Hover Pada Gambar dengan CSS3 kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 23:20