Подскажите, как реализуются такие карточки?

Question

С точки зрения верстки и потом БЭК исполнения как делаются такие карточки? Подобные как на дроме, это же явно не слайдеры. Стало интересно как их реализовывают , что потом при наведении меняется картинка , а в мобильной версии просто делается скролл

Буду признательная если подскажите видео како-то или статью , не могу ничего подобное найти

Answer 1

Займёмся реверс-инжинирингом. Просматриваем код

Видим, что в один блок <div> помещенны остальные блоки с картинками. У всех картинок в этом блоке стоит opacity:0, кроме первой. Дальше при наведении на этот блок картинке внутри меняем свойство opacity на 1, а у других картинок ставим 0. Таким образом будет казаться, что они меняются. Проверять есть ли ещё картники и при наведении на последний отображать поледнюю картинку и ещё текст "ещё 10 фото". Можно наверное сделать так же и через z-index. Можно реализовать так.

вот css code

<style data-emotion="css 7tf2d1">
.css-7tf2d1 {
height: 100%;
padding-top: 10px;
padding-left: 4px;
box-sizing: border-box;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

.css-7tf2d1::before {
content: '';
display: block;
opacity: 0;
height: 3px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.5);
webkit-transition: background-color ease 0.15s;
transition: background-color ease 0.15s;
}

.css-7tf2d1:first-of-type {
padding-left: 10px;
}

.drom-notouch .css-7tf2d1:hover::before {
background-color: hsl(0, 0%, 100%);
}

.drom-notouch .css-7tf2d1:hover >.eeq72o40 {
opacity: 1;
}

.css-7tf2d1:only-of-type {
padding: 0;
}

.css-7tf2d1:only-of-type::before {
display: none;
}
</style>
    ```

БЛОГ НА HUSL

Подскажите, как реализуются такие карточки?

Ответы (1 шт):