Сначала ставим картинку (в моём случае это иконка font-awesome ) и рядом блок (в моём случае это div) и всё это обёрнуто блоком родителем(в моём случае это .item) который просто flex и вертикальное выравнивание и всё а после этого обычная стилизация и в итоге получаем: https://codepen.io/topicstarter/pen/VobzxV
Ладно хоть и вопрос Баян и ещё с бородой но всё же отвечу
1) sublime text - это просто редактор кода
2) для этих целей есть всякие плюшки в стиле react, vue а так же pug но и этого мало но есть ещё и php.
В общем ищите по тегам " Шаблонизаторы HTML" в сети
Там собственно просто с подготовкой делается
1) две фотки и разобраться со scaleX и при hover сдвинуть с задержкой одну и с трансформацией поменять другую
это не сложно , вот такая же фигня но по моему : https://codepen.io/topicstarter/pen/MNapXe
