Как создать градиент для изображения с помощью css?

Question

[lahomie93]

Здравствуйте. У меня возникло 2 вопроса по созданию таких изображений:

скрины

Суть в следующем: при наведении мышки на фотографию должно произойти ее смещение и фото перекрывается градиентом. На фото должно появиться иконка (первый скрин) либо меню с соц сетями (скрин 2). У меня возникла проблема в создании такого эффекта. И мне нужен совет по следующим вопросам:

1) как мне написать код на css для создания градиента
2)подскажите с помощью каких элементов лучше всего сделать меню с соц сеятми как на скрине 2?

Answer 1

[Oleg Dobrygin]

Очень легко!

Сниппет: https://jsfiddle.net/je2xdL0z/9/

Думаю, иконки сами догадаетесь как разместить в меню :)

Answer 2

[Владимир]

Градиент — элемент ::after с абсолютной позицией, залитый градиентном и opacity.
Меню — вложенный элемент с display: none, который показывается при :hover на контейнере.

Answer 3

[Ankhena]

1. Градиент:
ценная статья https://html5book.ru/css3-gradient/
генератор: www.colorzilla.com/gradient-editor
Сам градиент нужно задать фоном к псевдоэлементу, который будет показываться при :hover на сам блок.
Поскольку градиент полупрозрачный, то цвета можно задавать в формате rgba или использовать opacity.

2. Меню с соц.сетями:
Сами ссылки: собственно <a> с заданными размерами и соответствующей картинкой в фоне, либо svg (svg лучше спрайтом). Смотря, что у вас в исходнике.
Обернуть ссылки можно в div или в список ul.

Делайте свой код в песочнице - посмотрим.