Hover Effect On Image

you'd never see the blog, when his picture in a hover / cursor point, the image will turn into a black and white effect, or darkening. How come? because the blog is already applying these effects, there are some effects that I share this time, you can select as needed

To apply this effect is very easy. Please enter the following CSS and adjust to the needs of your blog. If it is determined please login to blogger> templates> edit HTML and CSS to add her to the field of image you want given effect

The following examples for each CSS hover effects on the image:

#efek-gambar a img:hover { -webkit-filter:none; /*Returns to default*/; }
#efek-gambar a img.brightness:hover { -webkit-filter:brightness(0); }
.blur { -webkit-filter:blur(3px); }
.contrast { -webkit-filter:contrast(160%); }
.grayscale { -webkit-filter:grayscale(100%); }
.huerotate { -webkit-filter:hue-rotate(180deg); }
.invert { -webkit-filter:invert(100%); }
.opacity { -webkit-filter:opacity(50%); }
.saturate { -webkit-filter:saturate(3); }
.sepia { -webkit-filter:sepia(100%); }
.brightness { -webkit-filter:brightness(0.25); }

Examples of its application:

<div id="efek-gambar">
<img class="blur" src="Here your image link" />
</div>

examples of his results:

Blur

Contrast

Grayscale

Huerotate

Invert

Opacity

Saturate

Sepia

Brightness

Similarly, this time blogger tutorial on the various hover effect on the image. May be useful for your blog.

http://www.seocips.com/2015/11/9-efek-hover-sederhana-pada-gambar-di-blogspot.html