Write text (with semi-transparent background) over an image

An effect that is quite common to see sites and blogs next generation, are written in the so-called overlay over the images, often accompanied by a dark translucent background. Here's an example:

In this article we make the overwriting of our images using CSS.

The first thing to do is create an HTML structure like this:

 <div class="boximg">



  



 <img border="0" src="tramonto.jpg"/>



  



 <div class="boxtesto">



    



 <span class="testo"> A beautiful sunset! </ span>



  



 </ Div>







 </ Div>

As you can see I created a DIV container (with class ". Boximg") within which I position my image and a new div (with class ". Boxtesto") which in turn contains a span that marks the text you want to apply .

Let us now see the CSS that, materially, the work place:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * Same width of the image * /



  



 height: 300px; / * The same image height * /







 }







 {div.boxtesto



  



 position: absolute;



  



 bottom: 0px;



  



 left: 0px;



  



 width: 100%;



  



 background: rgb (0, 0, 0);



  



 background: rgba (0, 0, 0, 0.6);







 }







 {span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 font: bold 24px/45px Helvetica, Sans-Serif;



  



 letter-spacing:-1px;







 }

The storage box (". Boximg") has the same size and relative positioning to the image that is intended to accommodate.
The storage box of the text (". Boxtesto") is the focus of our work has absolute positioning, which removes it from the normal flow of elements and is positioned in the lower left corner of its container and obviously has a width to 100% to occupy the entire available space horizontally. Interesting, then, the two definitions of the background using rgb and rgba that serve to define the dark background and semi-transparent.
The span. "Text", finally, has the sole purpose to stylize the text and apply a little 'padding.

• <<
• 1
• 2
• >>