Yogesh Chauhan's Blog

How to add transparent text on top of an image using CSS?

in CSS on March 14, 2021

The trick is how we set the position property of the elements and also how we create the transparent background.

HTML

Let’s start with the simple HTML container with the image and texts. To set the seperate style for the texts, we will put the texts in a sub-container.

That will just show an image and texts below the image. Like this:

CSS

Let’s set the HTML document’s box-sizing property to border-box. It will keep the texts sub-container inside the main container and will not let it spread out.

Also, set the container’s position property to relative and set a maximum width. You can adjust the width as per your requirements.

The last and the most important part is to add an appropriate style for the texts container. We need to set the texts container’s position property to absolute. You can adjust the position by changing the value of top property. Adjust the background-color and opacity by changing the values inside rgba().

Final result


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to create a Bootstrap style accordion using CSS and JavaScript?CSSThe Difference Between the echo and print Commands in PHPPHPHow to implement NSNumberFormatter in Swift for currency?SwiftHow to remove N/A from Radio Button list in Drupal?DrupalHow to get current timestamp in Swift 4 and 5?SwiftHow destructuring works in React?ReactHow to create rotating texts using JavaScript and CSS?CSSWhy it’s not a good idea to create Number objects in JavaScript?JavaScriptHow to add Read More Read Less Button using JavaScript?JavaScriptHow to create a secure random number using JavaScript?JavaScriptWordPress: How to print ACF repeater field values?WordPressSimple Page Hit Counter in PHPPHP