Doing overlays without an empty div

Question

I learned from this question how to do overlays. However, the accepted answer uses an empty div, which Chris Coyier would argue is "not semantic" because the empty div is purely stylistic, not semantic.

How can I do overlays without an empty div?

Answer 1

Using the example you posted, you can use :after instead an empty element. Of course you have to keep in mind that :after is not supported by ie7 and lower. In this case you can use javascript to add an empty element only for ie7 and lower.

Example: http://jsfiddle.net/dppJw/2/