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.
[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
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.
6 Responses
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.
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.
Hi Aruna,
How would you make this overlay work with responsive images? Is there any easy fix?
Thanks!
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;
}
Hi Kate
Is it possible only showing the text on hover?
Br, Mads
Thank you!