Блоки с товарами, при наведении на фото, первое скрываем, показываем второе, как быть с размерами фото, не адаптивно?

Question

[Антон Вебсайтовский]

Всем привет.
Сделал блоки с товарами, так же сделал фишку простую, при наведении на фото, первая фотка скрывается и показывается вторая.
Вторая фотка прячется под первую.

О проблеме, как сделать чтобы фото резиновое было, у блока под классом imgss, где две фотки, вторая под первой прячется, присваивается размер, width: 100%; height: 270px;, я как только не пробовал и height: 100%; и height: auto; но так фото не видно. Видно фото если прописан размер блока у класса imgss, но так не адаптивно, как быть?

Фото резиновое если поставить width: 100%, но без height: 270px оно не видно будет, и выходит так, что у блока с классом imgss где фото, height фиксирован и мешает адаптации, вообщем чтоб понять смотрите пример.

Пример:
https://jsfiddle.net/vlit/ag14ju8s/158/

Comments

[Ankhena]

Можно:
- Заменить абсолюты на гриды.
- Оставить абсолют только одной фотке

[Антон Вебсайтовский]

Ankhena, я уже понял, советовали так, а если не гриды, я их пока не хочу использовать.

[Ankhena]

Антон Вебсайтовский, значит это

- Оставить абсолют только одной фотке

Еще вариант, одну из фоток делать фоном. Чтобы бэки не ругались, да и верстальщику проще, это делают через кастомные свойства.

[Антон Вебсайтовский]

Ankhena, фоном в css вписывать картинку, так не выйдет, этож не фиксированные картинки, а товары, у каждого товара они разные.

Смотрю в инете какие еще методы есть, раз так нельзя, значит может что-то другое есть.
Ну на крайняк через js можно же замутить.

[Ankhena]

Антон Вебсайтовский, почему нельзя задать абсолют только одной фотке, а?

фоном в css вписывать картинку, так не выйдет, этож не фиксированные картинки, а товары, у каждого товара они разные.

ДА! Именно поэтому, через кастомные свойства.

[Антон Вебсайтовский]

Ankhena, кастомные это какие? js?

Вроде по сути очень простая задача, но на css я так понял такое реализовать сложно, если не использовать грид.

[Ankhena]

Антон Вебсайтовский, Антон, кастомные свойства CSS, некоторые называют их переменными в CSS.
https://www.google.ru/search?q=кастомные+свойства+CSS

[Антон Вебсайтовский]

Ankhena, так в моем случае тогда что подойдет? раз поняла о чем речь. или это так вода )

[Антон Вебсайтовский]

Я тут на одном сайте увидел такое, но там все ок, https://gymwars.pro/catalog/
Щас попробую выдернуть этот метод что там.

[Антон Вебсайтовский]

Выдернул, чуть переделал, работает ) и без гридов обошлось.

https://jsfiddle.net/vlit/ag14ju8s/169/

[Ankhena]

Антон Вебсайтовский, да я вроде в первом посте написала, что абсолют нужно оставить только одной картинке...
Ну дошло и славно.

Кривенько, конечно, немножко, но тут дело не в картинках..


Кстати, следующей темой подумайте, что будет, если картинки будут разных пропорций у разных товаров.

[Антон Вебсайтовский]

Ankhena, не будет, при загрузке срабатывает обработчик для фото и режет все как надо.
Не ровно заголовок, да там как бы так задумано ! до такого сжиматься не будет как на скрине, там будет уже в ряд 3 блока.

[Ankhena]

Антон Вебсайтовский, ну и славно.

Если ещё и цена перестанет быть абсолютом, то будет почти совсем хорошо.

[Антон Вебсайтовский]

Ankhena, для начало надо понять задумку, почему так цена сделана.

[Ankhena]

Антон Вебсайтовский, ну и почему же?

[Антон Вебсайтовский]

Ankhena, я думал ты сразу поймешь.

[Ankhena]

Антон Вебсайтовский, все варианты, которые я придумала, решаются без абсолюта ;)

Answer 1

[Антон Вебсайтовский]

Два готовых вариант, с гридом: https://jsfiddle.net/gxouwqjy/
Без грида: https://jsfiddle.net/vlit/ag14ju8s/169/

Answer 2

[Softlink]

Наложение фотографий можно делать не только абсолютом.

Comments

[Антон Вебсайтовский]

спасибо, грид, но я пока его не использую, может на флексе как-то.