How to create a gradient for an image using css?

Question

css

Hello. I have 2 questions about creating such images:

screenshots

The bottom line is this: when you hover the mouse over the photo, it should shift and the photo is covered with a gradient. An icon should appear on the photo (first screen) or a menu with social networks (screen 2). I have a problem in creating such an effect. And I need advice on the following questions:
1) how do I write the css code to create a gradient
2) tell me what elements are best to use to make a menu with social seeds like in screenshot 2?

Answer 1

Very easy!
Snippet: https://jsfiddle.net/je2xdL0z/9/
I think you can guess how to place the icons in the menu :)

Answer 2

The gradient is an absolute positioned ::after element filled with a gradient and opacity.
The menu is a nested element with display: none that is shown on :hover on the container.

Answer 3

1. Gradient:
valuable article https://html5book.ru/css3-gradient/
generator: www.colorzilla.com/gradient-editor
The gradient itself must be set as a background to the pseudo-element that will be shown when :hover on the block itself.
Since the gradient is translucent, the colors can be set in rgba format or use opacity.
2. Menu with social networks:
The links themselves: actually <a>with the specified dimensions and the corresponding picture in the background, or svg (svg is better as a sprite). Looking at what you have in the source.
You can wrap links in a div or a ul list.
Make your code in the sandbox - we'll see.