Скажите пожалуйста как сделать такие карточки изображение вот ссылка https://pets.mail.ru/?

Question

[aurusplay]

Буду вам блогодарен если кините видео или название, то не могу найти вот ссылка https://pets.mail.ru/

Answer 1

[xmoonlight]

Самое сложное, что там есть:

.photo__labels {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 1;
    zoom: 1;
}

.photo__captions::before {
    content: '';
    position: absolute;
    left: 0;
    top: -15px;
    height: 15px;
    width: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .3)));
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 100%);
}

.photo__captions {
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding: 0 15px 15px;
color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .8)));
background: linear-gradient(rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 100%);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

Остальное - сетка, сделанная через таблицу.

Comments

[aurusplay]

можешь пж скинуть таблицу?

[xmoonlight]

aurusplay, ну в исходнике по той ссылке: открываем консоль и копируем.