mouseover 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); 
} 

Answer 2

これはStackOverflowの上で私の最初の答えですが、私は、少なくともであなたを指すことができると信じて右方向。

これに対する1つの答えは、JQueryとHTML canvas要素を使用することです。

// waits until all images have loaded 
$(window).load(function(){ 

//Fade in images so there isn't a color "pop" document load and then on window load 
    $(".item img").fadeIn(500); 

    // clone image 
    $('.item img').each(function(){ 
     var el = $(this); 
     el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){ 
      var el = $(this); 
      el.parent().css({"width":this.width,"height":this.height}); 
      el.dequeue(); 
     }); 
     this.src = grayscale(this.src); 
    }); 

    // Fade image 
    $('.item img').mouseover(function(){ 
     $(this).parent().find('img:first').stop().animate({opacity:1}, 1000); 
    }) 
    $('.img_grayscale').mouseout(function(){ 
     $(this).stop().animate({opacity:0}, 1000); 
    });  
}); 

// Grayscale w canvas method 
function grayscale(src){ 
    var canvas = document.createElement('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var imgObj = new Image(); 
    imgObj.src = src; 
    canvas.width = imgObj.width; 
    canvas.height = imgObj.height; 
    ctx.drawImage(imgObj, 0, 0); 
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); 
    for(var y = 0; y < imgPixels.height; y++){ 
     for(var x = 0; x < imgPixels.width; x++){ 
      var i = (y * 4) * imgPixels.width + x * 4; 
      var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
      imgPixels.data[i] = avg; 
      imgPixels.data[i + 1] = avg; 
      imgPixels.data[i + 2] = avg; 
     } 
    } 
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
    return canvas.toDataURL(); 
} 

SOURCE < - ダーシークラークから貫通素晴らしい散歩からのdemoと、あなたが探しているまさに（と思います）。

注： 上記のコードでは、覚えておいてください：

• はあなたがターゲット画像を設定する必要があります（例：.post-IMG、IMG、.gallery IMGなど）
• あなたがかもしれませんアニメーションの速度を変更する（つまり1000 = 1秒）

Answer 3

使用transition

.dealsimg { 
    -webkit-transition: -webkit-filter 300ms; 
    transition:filter 300ms; 
} 
.dealsdiv:hover .dealsimg{ 
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ 
    filter: grayscale(0%); 
}