Много Чего

Надо Лису с прозрачным фоном (я какою нашёл)



Именно вот так и делается 3D эффект при наведении (Tilt)

Разумеется что надо свою картинку запихнуть в src в svg

https://codepen.io/topicstarter/pen/BaLERwv - как обычно feGausianBlur для копии stroke

Не бутстрап - переделаете сами

Мне помогли с js но в общем так => https://codepen.io/topicstarter/pen/xxEBxeo

Если для cart написать pointer-events: none то всё хорошо :https://codepen.io/topicstarter/pen/abmXMoK

https://ru.stackoverflow.com/a/1231946/308951

А это SVG

В общем вот так получилось через event.target + slice(4) - который отрезает сам item

Только не пойму почему курсор мигает внутри квадратиков



Если удобнее то вот на стрелочной функции: https://codepen.io/topicstarter/pen/eYdbxOB

В общем давайте, тоже сами учитесь ещё, между defs расположен крестик (#cross) для копирования используем use и пишите так <use href="#cross" x="" y=""> а дальше x и y это координаты и расталкиваете куда надо до желаемого результата - если что то не получится пишите

знак вопроса вставить лучше всё таки картинкой: svg image и дальше как обычно x="" y="" width height

пунктирная линия получается в svg : stroke-dasharray

width height top left поправите сами

на flex

Я же давал разметку в SVG - то что бы менять при наведении статичный фон на градиент то достаточно одного css. Делается это так - смотри : https://codepen.io/topicstarter/pen/VwKGPRd

Если я что то делаю не так напиши в комментарии

А вот это без вставки SVG в блок : https://codepen.io/topicstarter/pen/JjRaNjV

В общем заумного ни чего нету здесь - рисуем обычный path и между defs располагаем linearGradient с уникальным ID и активному блоку присваиваем для SVG именно такой фон

Сама фигура делается с таких расчётов => если viewBox="0 0 200 70" то и path d будет таким M0,0 200,0
200,50 100,70 0,50 подробнее я уже пытался по teamviewwer объяснить ты мне не дал ..если не получается сделать в ручную то покупаем или пользуемся халявным векторным редактором ...открываем рисуем и сохраняем и вставляем в html в нужный блок ..в моём случае на ручном приводе получилось вот так

intersectionObserver

Дальше меди запросы и допиливать - изображения возьмёте по url , смотрите песочницу

https://codepen.io/topicstarter/pen/oNzqamy

html,body height: 100% уберите

флоат для обтекания
хотя в 2010 годах верстали и на флоатах