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

当我将鼠标悬停在div上时，如何让图像淡出灰度？在鼠标悬停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%); 
}

来源

2017-06-01 Rui Farinha

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

来源

2017-06-01 23:10:38

这是我在计算器上的第一个答案，但我相信我至少可以点你在正确的方向。

对此的一个答案是使用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，IMG名为.gallery等）
你可能改变动画速度（即1000 = 1秒）

来源

2017-06-01 23:10:14

如果这个答案包含一些代码而不是链接到教程，那将会很棒。该链接可能会死，但SO会生存:) – Graham

好吧，我更新它，所以有一个副本上SO大声笑 –

使用

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

来源

2017-06-01 23:10:57

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

回答

相关问题