Possible to add image caption with css pseudo content? - html

Question

I am looking for the easiest, most maintainable way to do this:
These are text slugs that will be appended to certain images throughout the site. They all say this same thing, but the images are varied and come from a CMS.
I know how I would do it with the image set to position relative and a div with "there's a better way" in an absolutely positioned child div.
However, since that requires HTML added to every image that gets this treatment, I was looking for a way to do this with a css class using the :before pseudo element. So far, applying the class to a wrapping link has no effect:
<img src="imagepath" alt="">
.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}
Is this sort of thing possible? Having the whole thing in CSS means all I have to do is have the CMS apply the class attribute when needed.

Answer 1

Yeah, ::before and ::after don't work on images. But you can apply them to the wrapper
link:
a{
position: relative;
}
a, a > img{
display:inline-block;
}
a::before{
content: 'theres a better way';
position: absolute;
left: 0;
top: 0;
width: 80%;
height: 20px;
left: 10%;
background: #000;
opacity: 0.4;
color: red;
font-size: 18px;
}
demo
If you want the text added in the HTML, you'll have to put a real element with it in your link (and apply the same rules to it, but without content)

Answer 2

I'll do it like this with jQuery :
Html
<div class="thumb">
<img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
<div class="caption">My caption</div>
</div>
Css
.thumb {
position:relative;
width:230px;
height:230px;
}
.thumb img {
max-width:100%;
}
.thumb .caption {
display:none;
position:absolute;
top:0;
height:20px;
line-height:20px;
width:100%;
text-align:center;
background:rgba(255,255,255,0.5);
}
JQuery
$('.thumb').hover(function() {
$(this).find('.caption').fadeIn();
}, function() {
$(this).find('.caption').hide();
});
See fiddle

Answer 3

NOTE TO ANYONE FINDING THIS THREAD: In Firefox 21 and IE 9/10 this did not work right with oversized images. It forced the images to 100% even if globally set to max-width: 100%
I had to follow the answer I selected above but set the A tag to display:block instead of display:inline-block to fix.