複数の画像にまたがって単語が重なって表示される

Question

私は、インスタントグラムの種類のフィードを作成しており、さらに4つの画像を4つ下にしています。私は8つの画像すべての前に単語を置くことができますそのInstagramへのリンクが含まれています。

私はそのほとんどを行っていますが、オーバーレイは機能しないようです。どのような助けもありがとうございます、事前に感謝します。このよう

ジョシュ

<ul class="images"> 
 
    <div class="col-sm-3"> 
 
     <img src="img/instagram/image-1.jpg" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 

 
    <div class="col-sm-3"> 
 
     <img src="img/instagram/image-2.jpg" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 
</ul>

Answer 1

使用0オーバーレイDIV ....

.images{ 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 
.overlay{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(255,255,255,0.5); 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    visibility: hidden; 
 
} 
 
.images:hover .overlay{ 
 
    visibility: visible; 
 
}

<div class="images"> 
 
    <div class="col-sm-3"> 
 
     <img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 

 
    <div class="col-sm-3"> 
 
     <img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 
    <div class='overlay'> 
 
     <span>some text</span> 
 
    </div> 
 
</div>

Answer 2

？あなたは、あなたが望むようにオーバーレイにどんな言葉を置くこともできます。私はxs列を使って完全に見ることができました。例のように画像全体の容器を覆う絶対位置と

.overlay{ 
 
    display:block; 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
    background-color:rgba(0,0,0,.5); 
 
    z-index:10; 
 
} 
 
.overlay h2{ 
 
    color:#fff; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
<div class="overlay"> 
 
<h2>Follow me on Insta</h2> 
 
</div> 
 
<div class="row images"> 
 
    <div class="col-xs-3"> 
 
     <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 

 
    <div class="col-xs-3"> 
 
     <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive"> 
 
    </div> 
 
</div> 
 

 
</div>

Answer 3

Iは以下だと思いますあなたが必要なもの。私はフレックスボックスをレイアウトに使用しました。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-flow: wrap; 
 
    width: 500px; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    margin: 0 0.5em 0.5em 0; 
 
    position: relative; 
 
} 
 

 
.text { 
 
    opacity: 0; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    position: absolute; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: 0; 
 
} 
 

 
.text:hover { 
 
    border: thin solid red; 
 
    animation: opac 0.3s ease forwards; 
 
} 
 

 
@keyframes opac { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row-sm-12 container"> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
    <div class="row-sm-3 item"> 
 
    <img src="http://placehold.it/100"> 
 
    <div class="text">Bla bla</div> 
 
    </div> 
 
</div>