Black and White Image Hover Effects

Black and White Image Hover Effects is the effect of the image to black and white when the mouse is highlighted image.

Live demo

please highlight image

CSS code:

.bw {

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.bw:hover {

-webkit-filter: grayscale(100%);

}

.pic {

float: center;

margin: 20px;

overflow: hidden;

}

HTML code:

<div class="bw pic">

<img src="url images" alt="sea">

</div>

Enjoy!