using SVG or CSS to add a “watermark” or overlay t

Question

How could I add a CSS or SVG overlay or watermark on an image being displayed on a web page? I have a grid of thumbnails that I am displaying and would like to highlight some of them with special notes or words.

HTML 5 and CSS3 but would need to degrade gracefully. JQuery would be acceptable too.

Answer 1

If I understand what you're asking, you could do it this way.

Say you have the following HTML markup

<div class='imageholder'>
    <img src='img/1.png' alt=''>
    <div class='watermark'>WATERMARK</div>
</div>

Anything you place in that .watermark div would display in the bottom of the image, overlayed onto it.

Your css would look like this

.imageholder{position:relative;}
.watermark
{
    position:absolute;
    bottom:0;
    background-color:rgba(0,0,0,.4);
}

Having an alpha on the background color would allow the user to partially see through it but still allow your text to be readable.