Efek Hover Pada Gambar Dalam Blog

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>

• 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/>.

Berikut kode CSS Berbagai Efek Hover Pada Gambar Dalam Blog.

1. Terang - Redup

<style>

.img1:hover {

opacity:0.3;

filter:alpha(opacity=30); /* For IE8 and earlier */

}

</style>

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>

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>

::: SELESAI ::: 

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Efek Hover Pada Gambar Dalam Blog. Anda bisa bookmark halaman ini dengan URL https://amierdoang.blogspot.com/2014/07/efek-hover-pada-gambar-dalam-blog.html. Terima kasih!

Ditulis oleh: x-mati -