Using css i try to convert image from colour to black and White. But its not happen in the top of the another div.
My code shown below
.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;
}<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>Sample test link https://jsfiddle.net/rijo/29eo2kkL/1/