How to Add a Transparent Text over Image using CSS

I was working on an online art gallery recently when I came across a requirement where I wanted to add a transparent text over an image. The text would describe the image and I could have used the title property of the image to do that. However, to read the title, one has to role the mouse over the image to read the text. Moreover, a text over image would look good.

Transparent text over Image using CSS

See this demo

It was not as difficult as thought it would be. Using CSS I could achieve what I planned, and it is simple. I’ll share this with you.

Here’s what I would do to get the result. I need a DIV element that will serve as a container and a <span> element that will have the text, which I want to show.

Also Read: How to Add Animation to AngularJS Applications with CSS3 keyframes Rules

First, add the DIV element on your web page and assign the image as the background. Since, it serves as a container any other element you add, will rest on top of the background image. All we need then is to position the element with text, at the bottom of the DIV and create a transparent view of the text.

The CSS and Markup

<!doctype html>
<html>
<head>
    <title>Text Over Image with CSS</title>

    <style>
        body {
           margin:2px;
           padding:0;
        }
        .myImage {
            font:14px Verdana;
            background:url('image.jpg');
            width:706px;
            height:209px;
        }
    </style>
</head>
<body>
    <div class="myImage">
        <span>A Text over an image</span>
    </div>
</body>
</html>

Text over Image using CSS

We now have the div showing an image as background and a text over it. As expected, it will show the text at the top location inside the DIV. I want the text at the bottom, with transparent effect. Therefore, I’ll add some CSS properties to the <span>.

span {
    display:block;
    background:#000;
    background:rgba(0, 0, 0, 0.6);
    color:#FFF;
    padding:20px 5px;
}

Transparent Text over Image

I have now added a darkish, transparent background to the text. The CSS rgba() method takes 4 parameters. The first three Zeros will return the color black and the last parameter 0.6 is for opacity, to give the element a transparent look.

Also try this: Crop, resize and optimize your pictures in 3 simple steps

Finally, I’ll set the position of the <span> along with <div> element. I’ll set the DIV’s position as “relative” and the <span> as absolute (so I can move it anywhere I want inside the container), with its ‘bottom’, ‘left’ and ‘right’ property set as 0.

The Complete Markup with CSS

<!doctype html>
<html>
<head>
    <title>Text Over Image with CSS</title>

    <style>
        body {
           margin:2px;
           padding:0;
        }
        .myImage {
            font:14px Verdana;
            background:url('image.jpg');
            width:565px;
            height:167px;
            position:relative;
        }
        span {
            display:block;
            position:absolute;
            bottom:0;
            left:0;
            right:0;
            background:#000;
            background:rgba(0, 0, 0, 0.6);
            color:#FFF;
            padding:20px 5px;
        }
    </style>
</head>
<body>
    <div class="myImage">
        <span>
            A Text over an image. 
            <a href="#" style="color:#FD9C00;text-decoration:none;">See more examples.</a>
        </span>
    </div>
</body>
</html>

👉 Do you know you can add a transparent text to an iamge (anywhere on the image) and save the image?Check out this article.

See this demo

Thanks for reading. ☺

← PreviousNext →

How to Add a Transparent Text over Image using CSS

Tools you can use