Memberikan Efek Hover Keren pada Gambar di Blog

Unknown

Tutorial

Kamis, 20 Februari 2014

17 Komentar

Memberikan Efek Hover Keren pada Gambar di Blog - Pasti sobat sudah pernah melihat sebuah gambar di Blog yang pada saat disentuh oleh kursor, gambar tersebut akan memiliki efek seperti berputar, menjadi gelap atau redup, membesar (zoom), transportasi, berpindah dan sebagainya.

Jadi dengan menggunakan efek tersebut pada Blog, maka Blog akan terlihat menjadi lebih unik dan indah. Untuk membuat efek hover tersebut sangatlah sederhana, hanya dengan meletakan kode CSS pada Template Blogger sobat.

Artikel ini merupakan request dari sobat kita yang bernama +Mawan Cradlez yang menanyakan bagaimana cara membuat logo yang berputar pada Blog ini.

Macam - Macam Efek Hover Gambar pada Blog

1. Membesar (zoom)

.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);

}

2. Transformasi

.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;

}

3. Berputar

.post img{

-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;

}



.post img:hover {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

-ms-transform:rotate(360deg);

transform:rotate(360deg);

}

4. Berputar dan membesar

.post img {

-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;

}



.post img: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);

}

5. Bergerak/berpindah

.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);

}

6. Meredup

.post img:hover {

opacity:0.3;

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

}

7. Redup menjadi terang

.post img {

    opacity:0.5;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

    -moz-opacity:0.5;

    -khtml-opacity:0.5;

}

.post img:hover {

    opacity:1.0;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

    -moz-opacity:1.0;

    -khtml-opacity:1;

}

Tertarik untuk memakainya? ikuti tutorial dibawah untuk menerapkannya pada Blog sobat.

1. Cari kode ]]></b:skin> atau </style> pada Template blogger sobet
2. Lalu letakan salah satu kode diatas tepat sebelum kode ]]></b:skin> atau </style> tersebut
3. Simpan dan lihatlah perubahannya

Sekian tutorial cara Memberikan Efek Hover Keren pada Gambar di Blog, semoga dapat bermanfaat bagi anda.