下にテキストを挿入するCss内にオーバーレイdivを含む5 div

Question

1人の画像の下にテキストを挿入したい。

これが私の状況です：

HTML：

<div class="background"> 
<div class="layer"> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg"> 
    <div class="overlay"> 
    </div> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg"> 
    <div class="overlay"> 
    </div> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg"> 
    <div class="overlay"> 
    </div> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg"> 
    <div class="overlay"> 
    </div> 
    </div> 
    <div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg"> 
    <div class="overlay"> 
    </div> 
    </div> 
</dvi> 
</div> 

はCSS：

.background { 
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    height: 100%; 
} 

.layer { 
    background-color: rgba(18, 29, 47, 0.96); 
    background-repeat: repeat; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    padding: 200px 20px 200px 20px; 
} 

.div-diviso { 
    width: 17%; 
    margin: 10px; 
    display: inline-block; 
    position: relative; 
    box-sizing: border-box; 
} 

.div-diviso img { 
    width: 100%; 
    position: relative; 
} 

.div-diviso .overlay { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    box-sizing: border-box; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.6); 
    opacity: 0; 
    transform: scale(0.1); 
    -webkit-transform: scale(0.1); 
    -moz-transform: scale(0.1); 
    -ms-transform: scale(0.1); 
    -o-transform: scale(0.1); 
    transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    visibility: hidden; 
} 

.div-diviso:hover .overlay { 
    opacity: 1; 
    transform: scale(1); 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    visibility: visible; 
    border: 3px solid #ffffff; 
    transform: border 2.75s; 
} 

@media (min-width: 768px) and (max-width: 980px) { 
.layer { 
    text-align: center; 
} 
.div-diviso { 
    width: 47%; 
    margin: 10px; 
} 
} 

@media (max-width: 767px) { 
.layer { 
    text-align: center; 
} 
.div-diviso { 
    width: 98%; 
    margin: 5px; 
} 
} 

そして、これは私が欲しいものです：

私はこの後にテキストをdiv要素を挿入しようとしましたが、以上の効果は次のように書かれても説明します

Answer 1

各div-divisoの下にdivを追加し、別のdivにラップしてください:)

.background { 
 
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
.layer { 
 
    background-color: rgba(18, 29, 47, 0.96); 
 
    background-repeat: repeat; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    padding: 200px 20px 200px 20px; 
 
} 
 

 
.div-diviso { 
 
    width: 17%; 
 
    margin: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
.div-diviso img { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.div-diviso .overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgba(0,0,0,0.6); 
 
    opacity: 0; 
 
    transform: scale(0.1); 
 
    -webkit-transform: scale(0.1); 
 
    -moz-transform: scale(0.1); 
 
    -ms-transform: scale(0.1); 
 
    -o-transform: scale(0.1); 
 
    transition: all 0.5s ease-in-out; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    visibility: hidden; 
 
} 
 

 
.div-diviso:hover .overlay { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    -o-transform: scale(1); 
 
    visibility: visible; 
 
    border: 3px solid #ffffff; 
 
    transform: border 2.75s; 
 
} 
 

 
@media (min-width: 768px) and (max-width: 980px) { 
 
.layer { 
 
    text-align: center; 
 
} 
 
.div-diviso { 
 
    width: 47%; 
 
    margin: 10px; 
 
} 
 
} 
 

 
@media (max-width: 767px) { 
 
.layer { 
 
    text-align: center; 
 
} 
 
.div-diviso { 
 
    width: 98%; 
 
    margin: 5px; 
 
} 
 
.image-description { 
 
    width: 100%; 
 
    color: white; 
 
    text-align:left; 
 
} 
 
    
 
    .duties-text { 
 
    color: blue; 
 
    font-size: 16px; 
 
    } 
 
}

<div class="background"> 
 
    <div class="layer"> 
 
    <div class="div-diviso-container"> 
 
     <div class="div-diviso"> 
 
     <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg" /> 
 
     <div class="overlay"> 
 
     </div> 
 
     </div> 
 
     <div class="image-description"> 
 
     <h2>Silvia Feit</h2> 
 
     <span class="duties-text"> Responsible for some shinanigans</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

は、オーバーレイ

<div class="div-diviso"> 
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg"> 
    <div class="overlay"> 
    </div> 
    <div class="text-block"> 
     /*here you text*/ 
    </div> 

後にテキストブロックを追加しよう