覆蓋多個圖像的文字

Question

我正在製作一個instagram類型的Feed，並且有4個圖像，下方還有4個圖像4.我需要製作一個覆蓋圖，可以將所有8個圖像放在前面顯示instagram關注者並鏈接到他們的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

用o覆蓋分度位置的絕對覆蓋像例子中的整個圖像容器....

.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

我認爲以下是你需要什麼。我用flexboxes進行佈局。

* { 
 
    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>