Как сверстать список товаров с эффектом наведения? [требует правки]

206

25 июля 2017, 16:50

Как сделать такую таблицу и чтобы при наведении был такой эффект?

Answer 1

Выделяешь каждый продукт в div и даешь ему условное название (например, item).
Можно решить с помощью JavaScript или CSS:

Далее подключаешь javascript-код/jquery-код(как удобнее), который занимается тем, что отлавливает hover на элементе с классом/айдишником «item»:
```
$( ".item" ).hover(
    тут идет твой код на изменения селекторов твоего div'а
);
```
Пример сделан на jQuery (прочитать подробнее можно в официальной докудентации.
Можно использовать CSS и отслеживать hover через специальный псевдокласс:
```
div.item:hover{
    /* тут стили, которые ты добавляешь для изменения формы, при наведении*/
}
```
Подробнее прочитать про hover можно на W3Schools.

Answer 2

.shop-item { 
font-family:garamond; 
position:relative; 
border:1px solid black; 
display:inline-block; 
padding:10px; 
transition:1s all; 
} 
.shop-item-hover { 
opacity:0; 
visibility:hidden; 
background:darkorange; 
position:absolute; 
top:0; 
left:0; 
right:0; 
bottom:0; 
transition:1s all; 
} 
.shop-item:hover .shop-item-hover { 
opacity:0.5; 
visibility:visible; 
} 
 
.shop-item:hover { 
transform:scale(1.1); 
box-shadow:0 0 20px rgba(0,0,0,0.3); 
}

<figure class="shop-item"> 
<img src="http://www.znakotveta.ru/i/Krovat-Florence-Art-Art-6301-00011153.jpeg" width="100"> 
<div class="shop-item-hover"></div> 
<figcaption><h3>Кровати!</h3></figcaption> 
</figure>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Авто-размер фото

У меня такой вопрос как сделать чтобы каждое фото в сайте адаптировалась с помощью блоков вот например как на скриншоте как бы например в инстаргаме...

351

HTML