Форум Сайтостроение Веб-строительство

(CSS) при наведении появляется блок с деталями

Z2
На сайте с 21.03.2008
Offline
126
zero20
443
Приветствую всех, нужна помощь по верстке (в ней не силен), нужно сделать так, чтобы при наведении на блок, в данном случае товар, показывался бы еще блок с доп. информацией, как на вайлдберизе - https://ibb.co/TrBLsXv
Untitled-1
Untitled-1
  • ibb.co
Изображение Untitled-1 расположенное в ImgBB
D.iK.iJ
На сайте с 26.05.2013
Offline
228
D.iK.iJ
#1

Ну, у них там при наведении на карточку ей добавляется через JS класс hover. А внутри есть скрытый блок. Ну и 

.kartochka.hover .blok {display: none;}

.kartochka.hover .blok { display:  block;}

это же можно заменить на :hover в CSS

.kartochka.hover .blok {display: none; position: relative;}

.kartochka:hover .blok {display: block;}

<div class="kartochka" ><div class="blok">Дополнительный текст</div></div>

Плюс, у них текст в стилях .blok сдвинут вниз через  transform: translateY(100%); 

transform: translateY(100%);
position: absolute;
bottom: 0;
left: 0;
right: 0;

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Z2
На сайте с 21.03.2008
Offline
126
zero20
#2

D.iK.iJ , нашел пример один, переделал его, вроде все ок, но при адпативности, когда в одну строку, у первых не выводится этот доп. блок.

Может посмотришь? - https://disk.yandex.ru/d/qiUOWFwUMWrTeg

D.iK.iJ
На сайте с 26.05.2013
Offline
228
D.iK.iJ
#3 
.product-grid:hover .product-content {
    transform: translateY(0px);
}

Полностью убрать, так как с ним поведение не совсем адекватное.

Добавить .col-sm-6 { position: relative; } в стили. Ну и я бы полностью удалил  transform: translateX(-50%) scale(1); везде.

Можно просто в стилях к  .product-grid .product-links поменять  left: 50%;  на  left: 0px;  и добавить туда же top: 100%;

Тогда станет работать нормально. Единственное, скрытие через  opacity: 0; не убирает элемент с экрана, а делает его прозрачным. Поэтому лучше все же display: none;  и  display: block; при наведении.

jquery. animate. opacity Оптимизация сайта для планшетов div position absolute height:100%.
Z2
На сайте с 21.03.2008
Offline
126
zero20
#4
D.iK.iJ, спасибо

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