Курс Выделение товара при наведении- урок от Wlad007

Wlad007

Модератор
Developer
Регист
14 Сен 2016
Сообщения
244
Симпатии
296
#1
Иногда надо выделить товар или акцентировать внимание именно на товар который заинтересовал пользователя

Как вариант можно использовать ниже приведённый код для оформления каталога магазина


Основной код

Код:
<div class="box-wrap">
  <div class="box">
    <p>box</p>
  </div>
  <div class="box">
    <p>box</p>
  </div>
  <div class="box">
    <p>box</p>
  </div>
</div>

Стили выделения

Код:
body{
  background:#f1f1f1;
  font-family: 'Inconsolata', monospace;
  font-weight:bold;
  color:gray;
  text-align:center;
  -webkit-font-smoothing: antialiased;
}
.box-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10%;
}
.box{
  padding:30px;
  margin:2%;
  background:white;
  width:30%;
  border:1px solid #d6d6d6;
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  border-radius:3px;
  transition:.2s all;
}
.box-wrap:hover .box{
  filter:blur(3px);
  opacity:.5;
  transform: scale(.98);
  box-shadow:none;
}
.box-wrap:hover .box:hover{
  transform:scale(1);
  filter:blur(0px);
  opacity:1;
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}



Получаем результат
 

MRX

Администратор
Регист
6 Апр 2016
Сообщения
1.216
Симпатии
860
#2
Поясни сразу куда это все вставлять ))
 

Wlad007

Модератор
Developer
Регист
14 Сен 2016
Сообщения
244
Симпатии
296
#3
Поясни сразу куда это все вставлять ))
.box-wrap это див у Вас может быть другой для этого шаблона это products-wrapper
<div class="box"> это c-goods__item для этого шаблона

А вставляется в стили
естественно меняя названия DIV на Ваши в стилях и не прописывая стили для
body
так как в примере написано просто для выделения блоков
 
Сверху Снизу