placing a text in front of a figure

Question

I just started learning code at codecademy, and completed an exercise, but I want to experiment in order to fully understand the code and how it works.

Screenshot

the web page on the right side has a section class="jumbotron" with an image as background with the size set to cover. I found easy to place a text in front of it, since it is a background.

Below that, there are 4 images and text inside figure class="col-sm-6" with a paragraph for item 1 and figure for the square images (2 for each div row) and I want to place the text item 1, item 2 inside the images and centered inside of it.

How does it work?

Take a look at this answer: http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css . It will help you. — Iffat Fatima, Feb 21 '16 at 11:45
You can either make each photo as a background of a div and have text inside the div OR if you want to keep the photos as tags then have a look at the suggestion by @IffatFatima which will require the following structure for each photo: `.item > img + span` where the span will contain the text and get absolute positioning to become above the photo layer — Aziz, Feb 21 '16 at 11:49

score 1 · Accepted Answer · answered Feb 21 '16 at 11:54

div {
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/0e/Tree_example_VIS.jpg");
  background-size: cover;
  position: relative;
  height: 450px;
  width: 600px;
}
span {
  background-color: rgba(255, 255, 255, 0.5);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

<div>
  <span>Example</span>
</div>

position: absolute on span makes it positioned relatively to the nearest positioned ancestor.

bottom: 0 puts our text in the bottom, and text-align: center centers it.

placing a text in front of a figure

1 Answers1