CSS image overlay to black and white

by Rijo R

HTML

<div class="col-xs-12 col-sm-6">
		<div class="home-center">
			<div class="home-center-text">
				<h2>our film</h2>
				<span>See our work</span>
			</div>
			<img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive">
			
		</div>
	</div>

CSS

.home-center {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
	color:#fff;
}
.home-center-text {
    position: absolute;
    width: 100%;
	z-index: 1;
}
.home-center img {
     -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.home-center img:hover {
 -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
}