To make a transparent cover overlay for the image i.e, to make a tint effect on the image, we use the pseudo-elements method to achieve this. The image may be a background image or a particular image in an element or it may be an element or it may be a list of images. Make sure the image is wrapped by a div element or any other element and have a class for the div or the particular element.
Example:
In the above example, the CSS.jpeg image is wrapped by a div element with the class tint.
In your style sheet use the class value as the selector and assign the properties as per the requirement and have the position as relative
Then create a pseudo-element for the class of wrapped div, for this selector we are giving the properties as position absolute. When the position is absolute, values for top, left are required and assign the required background color with opacity value for the color.
The above style properties do the trick, we have the pink tint over the image.
Here the image is fixed in its position with relative to the wrapped element. In pseudo class element to make the same element relative, so the background color overlayed on the image.
Thank you!!!
Have a good day !!!
No comments:
Post a Comment