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.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
3. Transparent Overlays to Images
To create the transparent overlays set the opaque property value between 0(translucent) and 1(opaque).
See the Pen by WidgetCore (@WidgetCore) on CodePen.
4. Hover overlay code examples
i. Fade-in Top
See the Pen by WidgetCore (@WidgetCore) on CodePen.
ii. Fade-in Bottom
See the Pen by WidgetCore (@WidgetCore) on CodePen.
iii. Fade-in Left
See the Pen by WidgetCore (@WidgetCore) on CodePen.
iv. Fade-in Right
See the Pen by WidgetCore (@WidgetCore) on CodePen.
v. Fade-in Top Right
See the Pen by WidgetCore (@WidgetCore) on CodePen.
vi. Fade-in Top Left
See the Pen by WidgetCore (@WidgetCore) on CodePen.
vii. Fade-in Bottom Right
See the Pen by WidgetCore (@WidgetCore) on CodePen.
viii. Fade-in Bottom Left
See the Pen by WidgetCore (@WidgetCore) on CodePen.
5. Conclusion
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.
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
