I'm trying to put a div over the image, this div will be a white container with a certain height and width, inside that container, it will contain a title and a paragraph.
Below I leave the section where I want to make this container, the div has the name "info-container". I've been able 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!