Responsive Images with Text Overlay

Description:

For this quick demo, I'm using absolute positioning for my figure overlay. OK, I almost never use absolute positioning in RWD. It goes against my grain. But sometimes we must break conventions to get things done.

The figcaption font-size is expressed in Viewport Width rather than pixels or percentages. Viewport Units are a relatively new kid on the CSS block — see related links below. As of this writing, most major browsers have at least partial support for Viewport Units. Suffice it to say, this won't work as well in hopelessly inferior browsers (bad browsers, you know who you are). So we use a fallback font-size in pixels.

HTML goes inside your <body> tag:

<figure class="overlay">      
<img src="https://placeimg.com/768/576/people/1" alt="person">
<figcaption> Figcaption<br>
Description<br> 
</figcaption> 
</figure>

CSS goes inside your stylesheet:

figure.overlay {    
position: relative;    
width: 100%;    
z-index: 1;  
}  
figure.overlay img {width: 100% }
    
figure.overlay figcaption {    
position: absolute;    
z-index: 1000;    
height: 100%;    
width: 100%;    
top: 0;  
/**optional background overlay**/    
background: rgba(255,255,255,0.2);  
/**text, adjust all values as desired**/    
padding: 57% 2% 0 2%;    
font-weight: 700;    
color: purple;  
/**some fallback value**/    
font-size: 16px;  
/**responsive size is roughly 3.4%  of the device's viewport width**/    
font-size: 3.4vw;  
}

That's all there is to it. Hope you enjoyed this responsive demonstration.

Custom Web Design & Development