Максим

если не понимаете то пишите так : margin-top, margin-right,margin-bottom,margin-left - это тоже самое что и margin: 0 0 5px 5px;

как бы тупо не звучало но самое кроссбраузерное это вырезать текст на слое в фотошопе а в css окрасить какой не будь div обычным градиентом и расположить его ниже того слоя с текстом

jsfiddle.net/oLpyqdz6/8

https://codepen.io/MariSan/pen/oxXZYK

https://codepen.io/topicstarter/pen/ZjWoWQ?editors=1100 ну можно так - хотя и по другому можно тоже
https://codepen.io/topicstarter/pen/OwNZzY второй вариант - но оба варианта надо допиливать

https://jsfiddle.net/a5uzwo9n/46/ вот так только

jsfiddle.net/ZxupR/18 примерно так

99% не правильный путь

в фотошопе уберите

$(elem).on("mouseout", function(){
  //здесь то что вы хотите сделать после того как курсор покинет блок 
  $(".item").addClass("new").removeClass("old").css({
    "transform":"translateX(pixel)"
 });
});

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

https://codepen.io/panfilov/pen/GogJVy на css3
https://bkosborne.com/jquery-waterwheel-carousel

fullpage.js - смотрите в сети примеры

https://jsfiddle.net/9zwr067u/7/
https://jsfiddle.net/xgu10o25/11/

это можно на svg/png сделать самую нижнюю часть и перекрывать абсолютом саму картинку .. и всё

https://jsfiddle.net/2hkjd3bm/15/ но пользуйтесь лучше flex
https://jsfiddle.net/2hkjd3bm/19/ вот на flex

а обычного parent:relative а child:absolute не канает ?