悬停在图像上覆盖

我不确定我在做什么错误试图让悬停上的图像上出现透明覆盖图。最初，我尝试了一种javascript方法，但那不起作用，所以我想我会尝试更轻量级的css方法。悬停在图像上覆盖

有没有人看到为什么这不起作用？

.section2-box { 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 50%; 
 
    border-bottom: 4px solid #FFF; 
 
    border-right: 4px solid #FFF; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 
.fadeHover { 
 
    transition: all .35s ease; 
 
    -webkit-transition: all .35s ease; 
 
    transition-delay: 0.10s; 
 
    -webkit-transition-delay: 0.10s; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.fadeHover:hover .overlay { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    z-index: 1; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    cursor: pointer; 
 
} 
 

 
.fadeHover-title { 
 
\t font-family: 'Raleway', sans-serif; 
 
\t font-weight: 600; 
 
\t font-size: 1.3rem; 
 
\t color: #FFF; 
 
\t display: none; 
 
} 
 
.fadeHover-title.activeHover { 
 
\t opacity: 1; 
 
} 
 
.fadeHover-description { 
 
\t font-size: 1.1rem; 
 
\t color: #FFF; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t display: none; 
 
} 
 
.fadeHover-description.activeHover { 
 
\t opacity: 1; 
 
} \t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="section2-box fadehover" id="section2box3"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg"> 
 
    <div class="overlay"> 
 
    <h2 class="fadeHover-title">Option 1</h2> 
 
    <h3 class="fadeHover-description">Description</h3> 
 
    </div> 
 
</div>

来源

2017-04-21 Paul

在你的html中，这个类被称为'fadehover'。在CSS中它是'fadeHover'。区分大小写。 ;-) – sn3ll

@ sn3ll哈哇...谢谢！我试图弄清楚为什么它不起作用，我正在抨击我的头。你知道我怎么能用fadeIn类型的方法显示文本，而不使用'opacity'，因为它下面有元素。 – Paul

不透明度是我知道淡化某些东西的唯一方式... – sn3ll

Regardinf在评论你的问题：0阿尔法改变元素的文本颜色从RGBA到1个字母：

.section2-box { 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 50%; 
 
    border-bottom: 4px solid #FFF; 
 
    border-right: 4px solid #FFF; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 
.fadeHover { 
 
    transition: all .35s ease; 
 
    -webkit-transition: all .35s ease; 
 
    transition-delay: 0.10s; 
 
    -webkit-transition-delay: 0.10s; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.fadeHover .overlay { 
 
    z-index: 1; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    cursor: pointer; 
 
} 
 

 
.fadeHover-title { 
 
\t font-family: 'Raleway', sans-serif; 
 
\t font-weight: 600; 
 
\t font-size: 1.3rem; 
 
\t color: rgba(255,255,255,0); 
 
    transition: color 0.5s; 
 
} 
 

 
.fadeHover:hover .fadeHover-title { 
 
\t color: rgba(255,255,255,1); 
 
} 
 
.fadeHover-description { 
 
\t font-size: 1.1rem; 
 
\t color: rgba(255,0,0,0); 
 
    transition: color 0.5s; 
 
} 
 
.fadeHover:hover .fadeHover-description { 
 
\t color: rgba(255,0,0,1); 
 
}

<div class="section2-box fadeHover" id="section2box3"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg"> 
 
    <div class="overlay"> 
 
    <h2 class="fadeHover-title">Option 1</h2> 
 
    <h3 class="fadeHover-description">Description</h3> 
 
    </div> 
 
</div>

来源

2017-04-21 18:40:19 vals

完美。谢谢您的帮助！ – Paul

悬停在图像上覆盖

回答

相关问题