圖像描述框與圖像與CSS＆html

我試圖在圖像上創建一個圖像描述框，我希望當您將鼠標懸停在圖像上圖像褪色。圖像描述框與圖像與CSS＆html

這是我想acheive什麼：

懸停我想這樣：

這是我走到這一步：

HTML：

<div class="app-img-wrapper"> 
<a href="images/Example/pexels-photo-344544.jpeg" title="Image 1"> <img src="images/Example/pexels-photo-344544.jpeg" class="img-responsive" alt="App"> <h2><span>Image Text</span></h2> </a> 
</div>

CSS：

.app-img-wrapper { 
    position: sticky; 
} 

.app-img-wrapper h2 { 
    position: absolute; 
    bottom: 0%; 
    left: 0; 
    width: 100%; 
} 

.app-img-wrapper h2 span{ 
    color: white; 
    font-size: 35px; 
    font-weight: 400; 
    text-align: center; 
    /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: 10px; 
}

結果：

正如你所看到的，我幾乎沒有，但有與盒匹配圖像尺寸的麻煩。如果有人有任何提示，請在下面建議

來源

2017-03-10 Java Gamer

不需要跨度在您的h2。爲所有內容添加了一些幫助程序類，並使覆蓋層不在a標記的僞元素中。添加了一些轉換，所以一切都會消失，但您可以根據需要調整它。

.app-img-wrapper { 
 
    position: sticky; 
 
    display: inline-block; 
 
} 
 

 
.app-img-link:hover:before { 
 
    opacity: 1; 
 
} 
 

 
.app-img-link:hover .app-img-text { 
 
    background: rgba(34, 139, 34, 0.7); 
 
    color: black; 
 
} 
 

 
.app-img { 
 
    display: block; 
 
} 
 

 
.app-img-text { 
 
    position: absolute; 
 
    bottom: 0%; 
 
    left: 0; 
 
    right: 0; 
 
    color: white; 
 
    font-size: 35px; 
 
    font-weight: 400; 
 
    text-align: center; 
 
    /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
    margin: 0; 
 
    transition: background .5s, color .5s; 
 
} 
 

 
.app-img-link:before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    content: 'Click to view info'; 
 
    color: white; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 2em; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: opacity .5s; 
 
    opacity: 0; 
 
}

<div class="app-img-wrapper"> 
 
    <a href="http://kenwheeler.github.io/slick/img/fonz1.png" class="app-img-link" title="Image 1"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="img-responsive app-img" alt="App"> 
 
    <h2 class="app-img-text">Image Text</h2> 
 
    </a> 
 
</div>

來源

2017-03-11 00:02:45

圖像描述框與圖像與CSS＆html

回答

相關問題