ну тоже гемморой но я другого способа не знаю :
так как css каскадные стили то можно указать кучу всяких шрифтов и в дэвтулс отключать по одному с низу вверх ...
тот же google.fonts - можно по очереди подключать шрифты
как бы тупо не звучало но самое кроссбраузерное это вырезать текст на слое в фотошопе а в css окрасить какой не будь div обычным градиентом и расположить его ниже того слоя с текстом
Уже давно для обтекания надо забыть float, в этом случае достаточно использовать flexbox, просто для родительского блока пишите, display:flex; в одном блоке идёт картинка и текст в другом текст и картинка ..
В svg позиционирование вообще не требуется, можно применять pattern svg, mask svg и эффект при правильном viewbox будет такой же как и при css absolute
$(elem).on("mouseout", function(){
//здесь то что вы хотите сделать после того как курсор покинет блок
$(".item").addClass("new").removeClass("old").css({
"transform":"translateX(pixel)"
});
});