javascript - 在鼠标悬停 div 上淡出灰度动画

Question

当鼠标悬停在div上时，如何使图像淡出灰度？

这是页面http://www.stirringminds.com/partners/

HTML:

<div class="col-xs-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/><span style="position:relative;bottom:15%;left:7%;color:#000;">Amazon Web Services</span><br><span style="position:relative;left:48.5%;bottom:50%;padding-right:-100px;">$1000 credits for 1 year.</span></div>

CSS:

.dealsdiv {
    height: 100px;
}

.dealsimg {
  width:150px;
  height:auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Answer 1

.dealsdiv {
    height: 100px;

}

.dealsimg {
  width:150px;
  height:auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: filter 400ms ease-in-out; //this is optional. change the duration if you want.

}

.dealsdiv:hover .dealsimg {
filter: grayscale(0);
}