How To Create a Transparent Image Text using CSS

In this example, we will see how to create a transparent image text using CSS. We will be using the position property along with the bottom property and some other properties.

Prerequisites

• CSS position property
• CSS bottom property
• CSS background-color property

Example

HTML

    <div class="container">
        <img src="./scanskill.jpg" alt="#" style="width:100%;">
        <div class="content">
            <h1>ScanSkill</h1>
            <p>Welcome to ScanSkill</p>
        </div>
    </div>

CSS

        .container {
            position: relative;
            width: 500px;
        }

        .content {
            position: absolute;
            bottom: 0;
            background-color: rgba(233, 7, 7, 0.5);
            color: white;
            width: 100%;
            text-align: center;
        }

Output

Here, we defined a container element with position: relative so that it is positioned relative to the browser's viewport and width: 500px sets its width to 500px. We set an image inside the container and set a content element with position: absolute so that positioned relative to its parent element, container. bottom: 0 attaches the content element to the bottom of the container element. Then, we displayed the white-colored text aligned at the center of a low opacity red background.

Conclusion

In this example, we learned how to create a transparent image text using CSS. We used the position property along with the bottom property to set the position of the text element within the container element and some other properties to style the text container.