Kumpulan Efek Hover Pada Gambar Dengan Css3

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

Cara Memasang imbas Gambar

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

• Login blogger
• Pergi ke Edit HTML
• Beri ceklist pada Expand Widget Templates
• Cari isyarat CSS .post img dan .post img:hover, jikalau ada isyarat tersebut ganti/replace dengan isyarat yang aku siapakan dibawah. Tapi jikalau tidak ada isyarat ibarat diatas, tinggal paste'kan saja diatas isyarat ]]></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 menentukan salah satu imbas gambar diatas, jangan lupa Save Template. Mungkin hingga disini dulu  wacana Kumpulan Efek Hover Pada Gambar dengan CSS3 kali ini, biar bermanfaat bagi Anda.

Sumber : Klik Disini

Berbagi :