Максим

.row{ display: flex;}

Там собственно просто с подготовкой делается
1) две фотки и разобраться со scaleX и при hover сдвинуть с задержкой одну и с трансформацией поменять другую
это не сложно , вот такая же фигня но по моему : https://codepen.io/topicstarter/pen/MNapXe

css => https://codepen.io/topicstarter/pen/jjRpmY
svg => https://codepen.io/topicstarter/pen/ZdgybL

https://codepen.io/topicstarter/pen/RXPQJr - фон подделать и в общем готово

text в svg имеет параметры , такие как x="" и y=""
x="" это горизонтальная ось
y="" это вертикальная ось

так вот <text x="20" y="20"></text> сдвинет сам текст на 20 по оси х и на 20 по оси y
в svg нету такого как text-align: center;

Собственно не сложно
Делаем input="search" + иконка лупы"
Оборачиваем оба элемента в div
Потом у input="search" убираем outline и border
А div border добавляем
Делаем border-radius
Скрываем крестик который есть только в IE и в Chrome
И получаем результат : https://codepen.io/topicstarter/pen/PrggwO

https://codepen.io/topicstarter/pen/agMVZg
https://fontawesome.ru/

https://caniuse.com/#search=animate

есть же наверно на gismeteo у них готовое ..или спарсить и оформить по своему
а вообще на скрине обычный слайдер - тот же slick или свой - его писать пять минут

сам же сказал "обтекание" т.е float

https://codepen.io/topicstarter/pen/gNBLPG хорошо бы увидеть переполнение блока

p:s вёрстка выполнена не верно

Так себе решение но похоже : https://codepen.io/topicstarter/pen/Wqawxg

apps.eky.hk/css-triangle-generator => https://codepen.io/topicstarter/pen/wLEjKg

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

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

https://jsfiddle.net/tvwm3qjz/

https://codepen.io/topicstarter/pen/agVmZK поправил чуть чуть

100% могу сказать что все ответы есть в поисковых системах как к примеру и этот: Создание адаптивной masonry-сетки на чистом CSS

Вот реализация : https://codepen.io/topicstarter/pen/YoVRXM

я не уверен но так надо ? : codepen.io/pen