Show Colored Overlay on Image Hover using CSS

A client smartly handed us a theme repair requirement, cloaked as a theme customization requirement. Why would I call it a theme repair requirement, you ask? Well, I do not know who had “built” this theme, but it was in need of some serious fixes. It was not mere customization, it was repair! A simple requirement, for example to apply an overlay on an image upon hover, was handled by showing a different image (one with the overlay).

A good theme should be built with an efficient design, and should be easy to maintain and extend. Keeping this in mind, requirements, such as adding an overlay to an image should be handled by simple CSS. You do not even need JavaScript.

Using a Span Element

In our case, the client wanted a green overlay upon image hover. This can be done by adding a span element, which will display the overlay.

<a href=”#”>

<img src=”http://example.com/images/img.jpg” width=”200″ height=”200″ />

<span class=”green-overlay”></span>

</a>

The visibility of the span element will be controlled using CSS.

The CSS to Apply an Overlay

We have to specify the width and height of the overlay, so that it completely covers our image. We can set the color to green, using the background property, and set a transparency value.

span.green-overlay {
background: rgba(0,255,0,0.2);

display: none;

height: 200px;

width: 200px;

position: relative;

bottom: 200px;

margin-bottom: -200px;
}

By default, the span appears below the image. To place it on the image, we have to set the properties bottom and margin-bottom to image height, enforcing that the overlay will appear with an offset, and will be placed exactly on top on our image. Because we have set the display property to none, the span will not be displayed. On image hover, we will display the overlay.

a:hover span.green-overlay {
display:block;
}

Adding Text to the Overlay

To display text as an overlay, we need to specify it in the span, and display it along with the overlay. Our HTML code would have to be modified as follows:

<a href=”#”>

<img src=”http://example.com/images/img.jpg” width=”200″ height=”200″ />

<span class=”green-overlay”><span>Your Text</span></span>

</a>

Along with this you would have to make the following changes in CSS:

a:hover span.green-overlay {
display: table;
}
span.green-overlay span {
display:table-cell;

text-align: center;

vertical-align: middle;
}

By default the text would appear in the top left corner. To change this we have added the alignment properties to center and middle.

To conclude, the span element provides us an option to display additional elements, like an overlay or text, over an image. The time of display can be controlled using CSS to track mouse movements, like hover over an image. Apart from this feature, there were many more such changes we had to make in the project, to better the theme. Some simple, some difficult and time consuming. But the effort was worth it because we met the client’s needs perfectly well.

• WordPress Tips & Tricks

Share:

• Aruna V

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!