懸停在圖像上覆蓋

我不確定我在做什麼錯誤試圖讓懸停上的圖像上出現透明覆蓋圖。最初，我嘗試了一種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

懸停在圖像上覆蓋

回答

相關問題