悬停时图像覆盖？

我试图在图像悬停上创建经典的“黑色”覆盖图。由于某种原因，我的是白色的。任何人都可以向我解释我做错了什么？这是我的jsFiddle。悬停时图像覆盖？

<img class="thumb-img"> 

.thumb-img:hover { 
    opacity:0.5; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    -webkit-transition: all 1s; 
    transition: all 1s; 
    background-color: #202020; 
}

来源

2016-11-30 coding4fun

您的代码表示，“当我将鼠标悬停在该图像上，使50％的不透明度/透明度”，这是在白色背景上的过程中它有一个白色覆盖的印象。 –

您的background-color属性从来没有见过，因为图像本身占据了元素的整个空间。它包装在一个<div>（或类似）：

.img-fade { 
 
    background-color: #202020; 
 
    float:left; 
 
} 
 
.img-fade img { 
 
    display: block; 
 
    
 
    -webkit-transition: opacity 1s linear; 
 
     -moz-transition: opacity 1s linear; 
 
     -ms-transition: opacity 1s linear; 
 
      -o-transition: opacity 1s linear; 
 
      transition: opacity 1s linear; 
 
} 
 

 
.img-fade img:hover { 
 
    opacity:0.5; 
 
}

<div class="img-fade"> 
 
    <img src="http://placehold.it/200x200" /> 
 
</div>

来源

2016-11-30 20:32:25 BenM

好的呼吁，这有“覆盖”是背景呢？我一直是一个duncecap，并添加一个绝对定位的覆盖，并使用jQuery来添加悬停状态。但在那种情况下，它被要求是因为叠加层上的内容需要100％不透明。 –

@Benm谢谢我的帮助。完美工作。 – coding4fun

@ coding4fun没问题！ – BenM

悬停时图像覆盖？

回答

相关问题