добавление наложения к сетке изображений при наведении - PullRequest
Новая
       18

добавление наложения к сетке изображений при наведении

0 голосов
/ 12 декабря 2018

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

.figure-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.description {
    opacity: 0;
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;  
}

.img-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

figure:hover .description {
    opacity: .8;
}

.d-name {
    color: white;
    font-size: 1.2em;
    font-weight: 600;
}

.d-item {
    color: white;
    font-size: 1.1;
}
<figure class="figure3">
    <img class="figure-img" src="images/propg" alt="5St.">
    <div class="description text-center">
        <p class="d-name">Tower</p>
        <p class="d-item">Pnsulation</p>
        <p class="d-item">topping</p>
    </div>
</figure>

<figure class="figure4">
    <img class="figure-img" src="image" alt="nehandler">
    <div class="description text-center">
        <p class="d-name"> Tower</p>
        <p class="d-item">nsulation</p>
        <p class="d-item">topping</p>
    </div>
</figure>

<figure class="figure5 ">
    <div class="img-container">
        <img class="figure-img" src="images/pr34th-St%20rendering.jpg" alt="4h St">
        <figcaption class="description text-center">
            <p class="d-name"> Tower</p>
            <p class="d-item">PInsulation</p>
            <p class="d-item"> Firestopping</p>
        </figcaption>
    </div>
</figure>
...