Search

Show Colored Overlay on Image Hover using CSS

Listen to this article

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.

Green Overlay On Hover

[space]

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.

[pre]<a href=”#”>
<img src=”http://example.com/images/img.jpg” width=”200″ height=”200″ />
<span class=”green-overlay”></span>
</a>[/pre]

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.

[pre]span.green-overlay {

background: rgba(0,255,0,0.2);
display: none;
height: 200px;
width: 200px;
position: relative;
bottom: 200px;
margin-bottom: -200px;

}[/pre]

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.

[pre]a:hover span.green-overlay {

display:block;

}[/pre]

[space]

Adding Text to the Overlay

Overlay With Text

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:

[pre]<a href=”#”>
<img src=”http://example.com/images/img.jpg” width=”200″ height=”200″ />
<span class=”green-overlay”><span>Your Text</span></span>
</a>[/pre]
[space]

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

[pre]a:hover span.green-overlay {

display: table;

}

span.green-overlay span {

display:table-cell;
text-align: center;
vertical-align: middle;

}[/pre]

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

[space]

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.

Aruna Vadlamani

Aruna Vadlamani

6 Responses

  1. Thank you! I found this article very helpful. However, I did find that I needed to add the proper z-index in order to have my colored span appear on top of the image.

    1. Hi Hope,

      Thank you for your comment. Glad the article helped you. In my case I didn’t need to add the z-index property, but its good you mentioned this. You can surely tweak the code as per your requirement. Sometimes elements might not be rendered in the correct order, and adding a z-index value can help.

    1. Hi Kate,

      Try updating the CSS for span.green-overlay to the following:
      span.green-overlay{
      background: rgba(0,255,0,0.2);
      height: 100%;
      position: absolute;
      width: 100%;
      display: none;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads