Нужна помощь

Родителю
overflow:hidden
position:relative
width:..
height:..

Пихаешь в этот контейнер картинку, апскейлишь её, чтобы не потерять пропорции(соотношение сторон зачастую разное, загуглишь,лень писать)
Так же внутри контейнера плашку пихаешь и ей:
position absolute;
bottom:0;
width 100%;
min-height: 50%;
transform:translateY(0)
transition: transform .15s; (ux время анимации выбирай в зависимости от разных разрешений экранов девайсов)
Ну и при ховерк на родителя

.parent:hover {
 transform:translateY(50%); (к примеру)
}

А так, советую книгу по css почитать

Иначе останешься навсегда в этом чате

А вот тебе годные гайды по design ui, чисто глазом тыкнуть

https://material.io/design/

Доброй ночи коллеги.
Проблема такая
В сафари и только на айфоне не подгружаются шрифты.
Во всех эмуляторах подгружаются.
На андроиде так-же.

Пробовали
Гугл-фонтсы подключать/отключать
В фонт-фейс вручную всё прописывать
Загружать шрифты отдельно на сервер

Притом если телефон подключить и открыть консоль разработчика в хранилище на телефоне они лежат.

С google fonts обязаны подрубаться, если вы только неправильно прописали их или у вас уже стоит шрифт, который перебивает его

Можно увидеть код где вы фонов вставляете и где прописываете?

И ещё, проверьте, есть ли ttf шрифты и стоит ли @charset UTF-8 (в HTML в мета тегах, css может подцепить её оттуда)

ctqxfc

Я все методы собрал в один

Как-то прояснило ситуацию?

Попробуй так
https://jsfiddle.net/Lwjh8p54/2/

что-то я про импорт в пур цсс даже забыл... уже на автомате импорт - вебпак

Робот стайл

Ну вот тебе через link
https://jsfiddle.net/zxb748ft/

Значит либо в вебаке что-то не так собираешь.А ещё ты sans-serif забыл указать

начертание можно не указывать. Оно обязательно-опционально.