Задать вопрос
@lahomie93
html

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

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

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

1) как мне написать код на css для создания градиента
2)подскажите с помощью каких элементов лучше всего сделать меню с соц сеятми как на скрине 2?
  • Вопрос задан
  • 142 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
odobrygin
@odobrygin
Front-end / Back-end Developer
Очень легко!

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

Думаю, иконки сами догадаетесь как разместить в меню :)
Ответ написан
Комментировать
Комментировать
@notnlwns
Градиент — элемент ::after с абсолютной позицией, залитый градиентном и opacity.
Меню — вложенный элемент с display: none, который показывается при :hover на контейнере.
Ответ написан
Комментировать
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Градиент:
ценная статья https://html5book.ru/css3-gradient/
генератор: www.colorzilla.com/gradient-editor
Сам градиент нужно задать фоном к псевдоэлементу, который будет показываться при :hover на сам блок.
Поскольку градиент полупрозрачный, то цвета можно задавать в формате rgba или использовать opacity.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Нужен таргетолог нашего сайта
23 апр. 2024, в 15:57
10000 руб./за проект
3d модель накладок для наушнико
23 апр. 2024, в 15:55
1000 руб./за проект
Игровой проект VRussia online в поисках опытного backend разработчика
23 апр. 2024, в 15:54
500 руб./в час
Ещё заказы