CSS Image Overlays: 5 Cool Effects

You can use CSS for a variety of cool image effects. One of those effects is an overlay—causing an element, typically a colored rectangle or text, to appear over an image. This can be used to achieve a variety of effects, such as highlighting an image or element on hover, displaying image captions, adding live text to an image, and more. In this article I’ll show five ways you can use CSS to apply image overlays.

Adding Transparent Overlays to Images

Color overlays are some of the most popular visual effects you can add to images on your website. When used as a hover effect, transparent color overlays can help users understand what action they are about to perform.

The main CSS class used here is overlay-effect. This lets you specify transition properties and the overlay color. You can use one of the hover classes to enable the effect, typically by increasing capacity.

See a code example below—the full code can be seen on Scott Madara’s excellent post.

When the user hovers over the blue sky element, a purple overlay color appears:

Overlay Styled Error Message Over Broken Images

Broken images are an eyesore on a website. Because images will inevitably break sometimes, you should have a solution. A nice option is to use CSS and JavaScript to style damaged images and provide custom error messages to your visitors.

In this CodePen by Ire Aderinokun, you can see how to overlay text and a fully functional button over an image, to provide a professional experience for users who come across a broken image.

Zoom on Hover

Zooming in on mouseover is a nice effect that encourages users to click on images. The effect works by enlarging the image when the user hovers over it, but without changing the size of the container. To get this effect you need a wrapper div that bypasses the usual HTML img tag.

This requires setting the parent element's width and height, and setting overflow to hidden. You can then apply any type of transformation or animation to the inner image.

See the below code example by W3Schools.

On hover, the green square is zoomed by 150%:

Image Board with Fixed Width, Variable Height Elements

You can use CSS Grid and Flexboxes to make layouts responsive, and center elements that were previously difficult to place on a page. In particular, you can use these elements to create a layout like the one used on Pinterest, where each element's vertical position changes according to the vertical position of the element above it.

You can achieve a Pinterest-like layout using CSS column properties. The first step is to create a div wrapping your elements, and specify two properties: column-width and column-gap. Finally, use the column-break-inside:avoid directive to prevent any elements from splitting across the columns.

You can see how this works below—see the full code example by Nathan Da Silva.

Scroll-snap-type

The CSS scroll-snap-type property provides control over the user’s scrolling experience. This can be useful in situations like an image gallery, where you want to allow users to scroll precisely to the next image or item in the gallery.

scroll-snap-type takes two parameters:

• The first determines how scroll snapping works—whether you control scrolling across the x or y axes
• The second determines if scrolling is mandatory, meaning the user must scroll to the next scroll point, or proximity, meaning the browser snaps to a nearby scroll point when appropriate.

Here is a code example, which forces the user to snap to scroll points along the Y axis.

.snapping-scroll {
scroll-snap-type: y mandatory;
}

Conclusion

In this article I covered five CSS image overlay effects:

1. Adding transparent colored overlay using overlay-effect on hover
2. Adding a styled error message to an image using the before attribute
3. Achieving zoom on hover using a wrapper div that bypasses the img tag
4. Achieving a Pinterest-like page layout using column-width and column-gap properties of a DIV
5. Using scroll-snap-type to guide the user’s scrolling experience in an image gallery

I hope this will help you impress and guide users by creating your own image overlay effects.