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/3j9zLokr/57/

<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>

CodePudding user response：

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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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!