Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Menerapkan Berbagai 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.

Berbagai Efek Hover Pada Gambar Dalam Blog

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.

Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog

  • 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>
  • 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>
  • 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>
  • Jika kita meletakan kode CSS-nya di atas kode ]]></b:skin> yang terdapat dalam HTML template, kita tidak perlu menyertakan kode <style> <style/>.

Terang - Redup

Bayi Lucu
<style>
.img1:hover {
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
}
</style>

Redup - Terang

Bayi Lucu
<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>

Berputar

Bayi Lucu
<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>


Berputar dan membesar (zoom)

Bayi Lucu
<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>

Membesar (Zoom)

Bayi Lucu
<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>

Transformasi

Bayi Lucu
<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>

Berpindah (moving)

Bayi Lucu
<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 atas 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.

Artikel terkait : Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog

Artikel Blog Regi Brader Lainnya :

3 komentar:

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved