I'm making a sidebar and I want it so that when you hover over a specific div the image of that div will change the grayscale from 100% to 0%. Here's my current progress: https://jsfiddle.net/8tx6ju97/
<div class="example">
<div class="a">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" />
</div>
<div class="b">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" />
</div>
</div>
<style>
.one, .two {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-left: 19px;
padding-top: 10px;
padding-bottom: 10px;
}
.two {
padding-top: 10px;
}
.one {
padding-bottom: 5px;
}
.example {
width: 100px;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.a {
outline: 1px solid white;
}
</style>
just ad to your css this code
.one:hover {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
.two:hover {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
https://jsfiddle.net/q5pdemjh/1/
enjoy!
You could do something like this:
.one, .two {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-left: 19px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.5s;
}
.one:hover, .two:hover {
filter: grayscale(0);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
}
The added transition: all 0.5s ensures that going from grayscale(100%) to grayscale(0) and back is smoothed over a 0.5s timeframe, whereas the :hover pseudoelement allows you to only trigger the change when you hover the divs with classes .one and .two.
You can use this code.
.one, .two {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-left: 19px;
padding-top: 10px;
padding-bottom: 10px;
transition: all .5s ease;
}
.two {
padding-top: 10px;
}
.one {
padding-bottom: 5px;
}
.example {
width: 100px;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.a:hover .one,
.b:hover .two {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}<div class="example">
<div class="a">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" />
</div>
<div class="b">
<img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" />
</div>
</div>