Kita biasanya menambahkan gambar-gambar pada postingan blog kita untuk membuat potingan lebih hidup, lebih jelas dan tentu saja agar lebih menarik. Banyak sekali efek-efek yang bisa kamu tambahkan untuk membuat gambar-gambar di postinganmu menjadi lebih menarik lagi, misalnya dengan menambahkan efek hover. Efek hover pada gambar di sini adalah efek yang muncul ketika cursor pointer mouse ada diatas gambar tersebut.

8 CSS image hover effects

Ada banyak efek hover pada gambar, diantaranya akan saya bagikan kepada anda 8 terpopuler dan sering digunakan. Efek ini dapat diguanakan pada Blogger dan Wordpress, tapi kode dibawah yang akan dibagikan pengaturannya sesuai dengan template Blogger.

1. Focus CSS image hover effect

Focus CSS image hover effect
.post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { border:70px solid #000; border-radius:50%; }

2. Grow CSS image hover effect

Grow CSS image hover effect
.post-body img { height:300px; width:300px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { width:400px; height:400px; }

3. Shrink CSS image hover effect

Shrink CSS image hover effect
.post-body img { height:400px; width:400px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { width:300px; height:300px; }

4. Morph CSS image hover effect

Morph CSS image hover effect
.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.post-body img:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }

5. Blur CSS image hover effect

Blur CSS image hover effect
.post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { -webkit-filter:blur(5px); }

6. Brighten CSS image hover effect

Brighten CSS image hover effect
.post-body img { -webkit-filter:brightness(-65%); -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { -webkit-filter:brightness(0%); }

7. Grayscale effect CSS image hover effect

Grayscale effect CSS image hover effect
.post-body img {    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */    filter: gray; /* IE6-9 */    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}.post-body img:hover {    filter: none;    -webkit-filter: grayscale(0%);}

8. Tilt CSS image hover effect

Tilt CSS image hover effect
.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.post-body img:hover { -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -ms-transform:rotate(-10deg); transform:rotate(-10deg); }

Cara Memasang Efek Gambar Pada Blogger

Nah untuk anda yang belum tahu bagaimana cara memasangnya di blog berikut adalah caranya:
1. Blogger dashboard
2. Pilih Template => Edit Html
3. Cari kode ]]></b:skin>atau </style> dan masukan salah satu efek gambar di atas yang ingin anda gunakan sebelum / di atas kode ]]></b:skin> atau </style>.
4. Save template.
0 Komentar untuk "8 Efek Hover Pada Gambar di Blogspot"