Попытка поставить контейнер над изображением - PullRequest
Новая
       16

Попытка поставить контейнер над изображением

0 голосов
/ 05 мая 2018

я пытаюсь поместить div над изображением, этот div - белый ящик, и внутри этого div есть заголовок и элемент абзаца, но я изо всех сил пытаюсь сделать белый ящик, текст появляется, но белый окно вообще не отображается.

Вот код раздела, который я пытаюсь сделать, у div есть имя "info-container". Я мог бы поместить текст поверх изображения, но белое поле не появляется, вы можете мне помочь?

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;
}

Большое спасибо заранее!

1 Ответ

0 голосов
/ 05 мая 2018

ок Так вот моя попытка,

сначала добавьте переполнение к информационному контейнеру и добавьте абсолютную позицию к нему и используйте поля h4 и p для выравнивания. 

.artist-photo {
    position: relative
}

.info-container {
  position:absolute;
  top: //As per need;
  overflow: hidden;
}

Удалите абсолютную позицию из h4, а p используйте поля для ее выравнивания 

.info-container>h4 {
    float: left;
    margin-right: 10px;
}

.info-container>p {
    float: left;
}
...