背景画像上にCSSオーバーレイ画像

私は自分のウェブサイト上で作業するためにオーバーレイを取得しようとしていますが、私はチュートリアルを見てきましたが、今私は何をしているのか分からない違う。背景画像上にCSSオーバーレイ画像

<head> 
    <link rel="stylesheet" href="css/venues.css"> 
</head> 

<section class="alt-section"> 

    <h2> Places we've played.</h2> 

    <div class="thumb-container"> 
    <a href ="" class="thumb-unit"> 
     <div class="thumb-overlay"> 
     <strong>Bar 42</strong> 
     <div class="zoom-icon"> 
     </div> 
     </div> 
    </a> 

    <a href ="" class="thumb-unit"> 
     <div class="thumb-overlay"> 
     <strong>The Prince Albert</strong> 
     <div class="zoom-icon"> 
     </div> 
     </div> 
    </a> 
    </div> 


</section>

とCSSは..です

.alt-section{ 
    background-color: #e6e6e6; 
    margin: 0 auto; 
} 

.alt-section h2{ 
    padding:50px; 
    color: #e1c184; 
    font-family: Spliffs; 
    text-align: center; 
    font-size: 35; 
} 

.alt-section a{ 
    font-family: sans-serif; 
    padding:10px; 
    font-size: 18px; 
    text-decoration: none; 
    color: #cd9732; 
} 

.alt-section a:hover{ 
    color: #e1c184; 
} 

.thumb-container{ 
    max-width: 960px; 
    margin: 0px auto; 
    padding-bottom: 100px; 
    overflow: hidden; 

} 

.thumb-unit{ 
    display:block; 
    width: 150px; 
    float:left; 
    position: relative; 
    height: 150px; 



    background-image: url(http://i.imgur.com/3VTqQ8M.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.thumb-overlay{ 
    position:absolute; 
    top:100%; 
    left:0px; 
    right:0px; 
    bottom:null; 
    height:100%; 
    background:rgba(205,151,50,0.5); 

} 

.thumb-overlay:hover{ 
    position:absolute; 
    top:0%; 
    left:0px; 
    right:0px; 
    bottom:null; 
    background:rgba(205,151,50,0.5); 
    transition: linear; 
    transition-duration: 0.5s; 

}

ユーチューブビデオは、彼らがそれを完了したポイントに私を持っているが、私はまだこの上で立ち往生しています。 https://www.youtube.com/watch?v=ygvo1_kqVUg

だから私のactuallの問題は、私はオーバーレイがポップアップ表示されます、それの上に置くと、そのサイズを大きくするように見えるカントアンカータグのヒットボックスのサイズで行うことです。

私は問題を見ることができるようにオーバーフローを表示に戻しましたが、写真上をスクロールするとオーバーレイが表示されません。

出典

2016-10-27 Jonny Gina Dommett

#element-with-background-image { 
 
    background-image: 
 
     linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
 
url("https://s-media-cache-ak0.pinimg.com/564x/b9/ea/bd/b9eabd96be305e1ee9fe5b6ca3fea673.jpg"); 
 
} 
 
    
 
#color-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    opacity: 0.6;

<div id="element-with-background-image"> 
 
    <div id="color-overlay"></div> 
 
    ... 
 
</div>

出典

2016-10-27 15:40:42

パーフェクト、どうもありがとうございました:) –

私の喜び.... –

背景画像上にCSSオーバーレイ画像

答えて

関連する問題