Как создать градиент для изображения с помощью css?
Очень легко!
Сниппет: https://jsfiddle.net/je2xdL0z/9/
Думаю, иконки сами догадаетесь как разместить в меню :)
Градиент — элемент ::after с абсолютной позицией, залитый градиентном и opacity. 
Меню — вложенный элемент с display: none, который показывается при :hover на контейнере.