How to add a semi-transparent color layered text over an image using pure CSS

We all know how much it's important to include images along with text contents in a website.  And again adding a good description to the image is even more important.  In this article we'll see how to add text over the images using pure CSS.

There are varieties of ways to include text over images.  But the semi-transparent layered text to the bottom of the image without hiding its details is one of my favourite.  It always gives a clean and elegant look.

Text Over Image using CSS - Demo

This is how the image will look before and after adding the text.

Before Adding Text

Hearty Welcome to Nature...

After Adding Text

In order to accomplish the effect, we wrap up the image and its description within a <div> block.  One of the greatest advantage of using this style is, you don't have to worry about positioning the text at the right place over the image.  The text will be tucked neatly at the bottom of the image, provided whatever the image size you choose. You can use this technique to add sub titles to images while creating image gallery.

HTML Markup

<div class="imageBlock">
    <img src="flowers.jpg" />
    <span>Hearty Welcome to the Nature...</span>
</div>

CSS Code

.imageBlock {
   display: inline-block;
   position: relative;
   padding: 0px;
   border: none;
}

.imageBlock span { 
   display: block;
   position: absolute; 
   width: 100%; 
   font: bold 20px Arial; 
   line-height: 2em;
   text-align: center;
   color: black; 
   background: rgb(255, 255, 255); /* fallback color */
   background: rgba(255, 255, 255, 0.5);  /* add transparent layer */
   bottom:0px;
}

The text and background color can be changed as per your need.  You can even apply some animation effects to spice up the text over the image.  If you find this article useful, please don't forget to share it in your circle :).