Styling text on top of an image using CSS

Question

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code:

.gallery-image {
  position: relative;
}
h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}
h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

<div class="gallery-image">
  <a href="#">
    <img src="image.jpg" width="280">
  </a>
  <h2><span>Text</span></h2>
</div>

Unfortunately, my text is appearing behind the image. How can I resolve this issue?

html css

Answer 1

Answer №1

This code snippet has been effective in my experience:

Make sure to assign a z-index: 2; to the img
Additionally, give the h2 element a z-index: 3;

Answer 2

This code snippet has been effective in my experience:

Make sure to assign a z-index: 2; to the img
Additionally, give the h2 element a z-index: 3;

Answer 3

Answer №2

.container {
  position: relative;
}
h2 {
  position: absolute;
  bottom: 10%;
  background: darkgray;
  padding: 1%;
  color: white;
}

<div class="container">
  <img src="http://placekitten.com/g/200/300" alt="" />
  <h2>THIS text</h2>
</div>

Is this what you had in mind? I've updated the styling for the h2 tag and simplified the structure of the code.

Answer 4

.container {
  position: relative;
}
h2 {
  position: absolute;
  bottom: 10%;
  background: darkgray;
  padding: 1%;
  color: white;
}

<div class="container">
  <img src="http://placekitten.com/g/200/300" alt="" />
  <h2>THIS text</h2>
</div>

Is this what you had in mind? I've updated the styling for the h2 tag and simplified the structure of the code.

Answer 5

Answer №3

I believe some clarification is necessary.

Although the example appears to be functioning properly, if it does not work for OP, they can try using z-index. However, simply applying z-index to the img tag alone will not produce the desired result, as shown here. Adjusting the z-index of both the image and h2 will have no impact.

z-index only functions on positioned elements. Since the parent element has a position:relative, you can utilize position: inherit on one of its children (or assign a position directly). In this scenario, the img is enclosed within an anchor tag:

<a href="#">
   <img src="image.jpg" width="280">
 </a>

Hence, adding a z-index to the img tag is redundant. It is more appropriate to add it to the a instead:

a{
  position: inherit;
  z-index: 2;
}

By adjusting the z-index values of h2 and a, you will observe that the element with the higher numeric z-index value comes to the fore:

EXAMPLE

Answer 6

I believe some clarification is necessary.

Although the example appears to be functioning properly, if it does not work for OP, they can try using z-index. However, simply applying z-index to the img tag alone will not produce the desired result, as shown here. Adjusting the z-index of both the image and h2 will have no impact.

z-index only functions on positioned elements. Since the parent element has a position:relative, you can utilize position: inherit on one of its children (or assign a position directly). In this scenario, the img is enclosed within an anchor tag:

<a href="#">
   <img src="image.jpg" width="280">
 </a>

Hence, adding a z-index to the img tag is redundant. It is more appropriate to add it to the a instead:

a{
  position: inherit;
  z-index: 2;
}

By adjusting the z-index values of h2 and a, you will observe that the element with the higher numeric z-index value comes to the fore:

EXAMPLE

Styling text on top of an image using CSS

Answer №1

Answer №2

Answer №3

Similar questions

`Incompatibility issue between HTML, CSS and Chrome browser`

Having Trouble Scooting Down the Page on Mobile?

`Angular 9 template directives`

Customizing Bootstrap CSS

From dividing into three sections to splitting into two sections

Unexpected token . encountered in Javascript: Uncaught Syntax Error. This error message is triggered when

Utilizing HTML and CSS allows for creating a responsive layout with three elements such as this

Is there a way to inject C++ text into an input field on a webpage using QWebEngine?

Positioning CSS icons beside text

Attempting to enlarge an image by hovering over it proves to be futile

The process of creating a functional search bar in Django

Unable to render Angular charts

Is there a way in Angular2 to append a class name from a variable to the host element without removing the current classes?

Update the src attribute in an HTML document

Tips on extracting code differences from code inspector

What is the trick to have a CSS element overflow the boundaries of its containing div entirely?

Problem encountered with modal and JavaScript: Uncaught TypeError: Unable to retrieve the property 'classList' of null

Is there a simpler way to retrieve data from PHP or to efficiently filter the data once it's been retrieved?

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

What is the process for programmatically aligning two cards side by side using Material UI in React after retrieving data from an API?