Как отделить товары сеткой друго от друга и выделить анимацией при наведение?

Question

[worldheady]

Не понимаю как отделить товары друг от друга границами...
Вот скрин

Вот сайт с примером: https://vk.cc/9YlrTg

Вот сайт где я пытаюсь это сделать: (thx)

Если вы сможете помочь добиться не только отделить товары границами, но и настроить анимацию при наведение, я буду вам чрезмерно благодарен! Или хотя бы подскажете куда "рыть" по поводу анимации.

Comments

[ADMIN INDIGO]

Html и css изучить на базовом уровне

[worldheady]

ADMIN INDIGO, не поверишь это и делаю, но бывают моменты, когда тупик и это не из-за того что я тупой, а просто перенасыщение информацией с которой не сталкивался... возможно я и сам отвечу на свой вопрос со временем, но вариант поддержки от сообщества тостеров я тоже рассматриваю.

[ADMIN INDIGO]

worldheady, ок пропиши этим элементам ну которые повторяются где товары margin: 10px;

[ADMIN INDIGO]

worldheady, извини если задел. Помню как сам начинал. А ты где учишь что учишь можно подскажу что?

[worldheady]

ADMIN INDIGO, Как мне кажется я выбрал не очень правильный путь. Изучать я всё начал непосредственно с практики имея миниминиминимальные знания по html. Но теперь исходя из моих потребностей я понял что мне следует изучить рекомендации Ankhena, кстати ещё раз вам спасибо!

Answer 1

[Ankhena]

Наведу на мысль: https://jsfiddle.net/ro4Lgqud/
Что изучать:
- свойство border
- флексы
- псевдокласс :hover
- множественные box-shadow
- transition для плавности
- z-index
- инструменты разработчика в браузере, чтобы посмотреть как это сделано у других (открываются по F12 или Ctrl+Shift+i)

Comments

[worldheady]

Спасибо! Я вам очень благодарен!