CSS image overlay is a very common way of putting text or image over another base image. CSS image overlay can be a solid color, a gradient, or a blur effect.
The image overlay effects add an interaction as text or image appears when users hover over an image.
CSS overlay effects are achieved by following three properties:
- background: Using background property we add background image or gradient to an overlay.
- position: To control the position of the overlay element from left, right, top and bottom.
- ::after and ::before: CSS pseudo-element with content to add the content in the overlay effect.
CSS overlay effects can be of two types:
- Text-overlay: Putting text over an image e.g. watermarks.
- Image-overlay: Putting image over an image e.g. banners.
In this article, we will cover some simple and easy to create image overlay effects.
1. How to make rendered text readable
- Background color: Apply the small block of background color behind the text, leaving the image unchanged.
- Gradient: It applies a gradient of colors or shades over an image for more readable text.
- Image blur: It reduces the details by adding the background to the text, making it easier to see where the text starts and ends.
- Color overlays: It applies a single color or shade over an image, this makes the text looks cleaner and readable as it competes with only one color.
2. Overlaying Text on Image
To overlay the text in the desired position set your container element to be position: relative and your text element to be position: absolute.
3. Transparent Overlays to Images
To create the transparent overlays set the opaque property value between 0(translucent) and 1(opaque).
4. Hover overlay code examples
i. Fade-in Top
ii. Fade-in Bottom
iii. Fade-in Left
iv. Fade-in Right
v. Fade-in Top Right
vi. Fade-in Top Left
vii. Fade-in Bottom Right
viii. Fade-in Bottom Left
Hopefully, the above write-up was enough for getting familiar with the CSS image overlay effects. However, if you have any questions or suggestions you can write us in the comment section below.