Efek Hover Pada Gambar Dalam Blog

Selain pada seluruh gambar yang terdapat dalam posting, efek gambar juga dapat diterapkan pada salah satu gambar yang kita inginkan saja. Baik satu gambar dalam posting, widget, ataupun template.
Banyak sekali berbagai efek gambar yang dapat diterapkan, namun saya hanya akan memberikan beberapa diantaranya saja khususnya efek jenis hover.
Perhatikan penjelasan kali ini ya. Untuk Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog ini caranya sangat sederhana. Pertama kita membuat script CSS untuk mengatur tampilan, lalu memberikan kode "class" pada HTML gambar tersebut.
  • Jika kita menerapkan efek pada gambar yang terdapat dalam template, letakan kode CSS-nya pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin>
 Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog
  • Jika kita menerapkan efek pada gambar yang terdapat dalam posting, kita bisa letakan kode CSS-nya sebelum memasukan kode HTML gambar ketika membuat posting dalam mode HTML. Atau bisa juga pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin>
Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog
  • Jika kita menerapkan efek pada gambar yang terdapat dalam widget, kita bisa letakan kode CSS-nya sebelum memasukan kode HTML. Atau bisa juga pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin>
Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog
  • Jika kita meletakan kode CSS-nya di atas kode ]]></b:skin> yang terdapat dalam HTML template, kita tidak perlu menyertakan kode <style> <style/>.
Berikut kode CSS berbagai efek hover pada gambar blog
1. Terang - Redup
<style>
.img1:hover {
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
}
</style>

Demo

2. Redup - Terang 

<style>
.img2 {
    opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
}
.img2:hover {
    opacity:1.0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity:1.0;
    -khtml-opacity:1;
}
</style>

Demo

3. Berputar. 

<style>
.img3{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.img3:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>

4. Berputar dan membesar (zoom). 

<style>
.img4 {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.img4:hover {
-webkit-transform: scale(1.2) rotate(1080deg);
-moz-transform: scale(1.2) rotate(1080deg);
-o-transform: scale(1.2) rotate(1080deg);
-ms-transform: scale(1.2) rotate(1080deg);
transform: scale(1.2) rotate(1080deg);
}
</style>

5. Membesar (Zoom) 

<style>
.img5 {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.img5: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);
}
</style>

6.Transformasi 

<style>
.img6 {
    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;
}
.img6: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;
}
</style>

7. Berpindah (moving) 

<style>
.img7 {
    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);
}
.img7: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);
}
</style>

Kode berwarna biru adalah kode yang tidak perlu disertakan jika meletakan kode CSS di bawah kode ]]></b:skin> yang terdapat dalam HTML template.
Kode berwarna merah adalah nama id yang bisa sobat ubah sesuai keinginan.
  • Silakan terapkan efek gambar ini dengan meletakan kode CSS dengan cara yang telah dijelaskan di bagian atas pada posting ini. Selanjutnya, letakan kode HTML seperti berikut ini di posisi yang akan digunakan untuk meletakan gambar, seperti posting, widget, atau template.
<img class="img7/nama id" src="URL GAMBAR"/>

Ubah kode berwarna merah dengan nama id yang digunakan.
Ubah kode berwarna biru dengan url sebuah gambar.
OK, selesai. semoga sobat sukses menerapkan efek-efek gambar ini. Dengan cara ini maka sobat dapat memberikan efek yang berbeda pada masing-masing gambar, seperti pada posting kali ini.
Jika sobat ingin memberikan efek yang sama pada semua gambar dalam posting, sobat bisa baca Memberikan Efek Zoom pada seluruh gambar dalam posting, kemudian merubah efeknya dengan yang sobat inginkan contohnya seperti efek gambar yang saya berikan pada posting kali ini.
Share artikel ke: Facebook Google+ Twitter Digg
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)