Div on top of image

Question

I’m trying to put a div on top of the image, this div will be a white container with a certain height and width, inside that container, will contain a title and a paragraph.

Below I leave you the section where I want to make this container, the div has the name "info-container". I managed to put the text on top of the image, but the white container I’m trying to create, does not appear at all.

HTML:

<section class="section-artists">
          <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>
      </section>

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!

Answer 1

I made this simplified file here and it may help you,

Html:

<figure class="artist-photo">
    <img src="img/01.jpg" alt="Ed Sheeran">
    <div class="info-container">
     <h4>LOGIC</h4>
     <p>Twitter-API</p>
   </div>
 </figure>

CSS:

.artist-photo {
    width: 100%;
    height: 100%;
    margin:0;
   overflow: hidden;

}

 .info-container {
   position: absolute;
   background: #bf1e1e;
   width: 500px;
   height: auto;
   top: 50px;
   padding: 0;
   margin-bottom: -20%;
   z-index: 1;
 }

This way it worked right here, you can take this example and go put your other CSS’s on it and see what’s giving conflict.