CSS Filter Gray Does Not Happen in Image
With css I am trying to convert image
from color to black and white. But this won't happen at the top of 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>
Test link example https://jsfiddle.net/rijo/29eo2kkL/1/
+3
source to share
3 answers
Apply :hover
not to the image, but to the wrapper:
.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:hover img {
-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>
+3
source to share
Use :hover
on wrapper no img
:
.home-center:hover img{
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}
.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:hover img{
-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>
0
source to share
You can trigger effects on another element based on hover
another element. Like this.
.home-center-text:hover ~ .home-center-img
{ /* Do stuff here */ }
.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;
}
.home-center-text:hover ~ .home-center-img {
-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 home-center-img">
</div>
</div>
Based on this answer .
0
source to share