Trying to put a container over a image - html

Question

im trying to put a div above a imagem, this div is a white box, and inside this div there are a title and a paragraph element, but im struggling to make the white box appear, the text appear, but the white box doesn't appear at all.
Here is the code of the section im trying to do this, the div has a name of "info-container". I could put the text over the image, but the white box is not appearing, can you help me?
HTML:
<div class="row">
<h1>SEE YOUR TOP ARTISTS</h1>
</div>
<ul class="artists-showcase Clearfix">
<li>
<figure class="artist-photo">
<img src="img/logic.jpg" alt="Logic">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="img/avicci.jpg" alt="Avicci">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="img/ed_sheeran.jpg" alt="Ed Sheeran">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="img/eminem.jpg" alt="Eminem">
<div class="info-container">
<h4>LOGIC</h4>
<p>Twitter-API</p>
</div>
</figure>
</li>
</ul>
CSS:
.section-artists {
padding: 0;
}
.artists-showcase {
list-style: none;
display: inline-block; /* Alinhamento centro */
width: 110%; /* Alinhamento centro */
margin-left: -5%; /* Alinhamento centro e full width */
height: 100%;
margin-top: 5%;
}
.artists-showcase li {
display: block;
transform: skewX(-10deg);
float: left;
width: 25%;
height: 100%;
}
.artist-photo {
width: 100%;
height: 100%;
margin:0;
overflow: hidden;
background-color: #000;
}
.artist-photo img {
opacity: 0.7;
width: 150%;
height: auto;
-webkit-transform: scale(1.18) skewX(10deg); /* reverte o skew para a imagem ficar reta */
transform: skewX(10deg);
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
transition: transform 0.5s, opacity 0.5s, filter 0.5s;
transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
}
//*.artist-photo img:hover {
// opacity: 1;
// -webkit-transform: scale(1.03) skewX(10deg);;
// transform: scale(1.03) skewX(10deg);
// filter: hue-rotate(250deg);
/*/
/* Container com texto e titulo */
.info-container {
background: #fff;
width: 500px;
height: auto;
top: 50%;
padding: 0;
margin-bottom: -20%;
z-index: 1000;
}
.info-container>h4 {
float: left;
position: absolute;
top: 50%;
left: 10%;
z-index: 1000;
}
.info-container>p {
float: left;
position: absolute;
top: 55%;
left: 10%;
z-index: 1000;
}
Thank you very much in advance!

Answer 1

ok So here is my try,
first add overflow to the info-container and add position absolute to it and use margins h4 and p for alignment.
.artist-photo {
position: relative
}
.info-container {
position:absolute;
top: //As per need;
overflow: hidden;
}
Remove position absolute from h4 and p use margins to align it
.info-container>h4 {
float: left;
margin-right: 10px;
}
.info-container>p {
float: left;
}