Overlaying images without backgrounds

[RioBrewster]

I want to set up CSS so that I can give an image a class=”view-larger” and overlay a magnifying glass graphic on top of it.

BUT I don’t want to put the main graphic in the background because I don’t want to add page-specific, or inline CSS to display the main image.

I tried using .view-larger:after to display the magnifying glass and then re-position it over the main image, but that doesn’t work. I tried both absolute and relative positioning, different display values and nothing seems to work.

It does work on a p tag.

Here’s the pen of how I think it should work:

http://codepen.io/anon/pen/jPayBK

Here’s what I am trying to do:

http://comptroller.texas.gov/about/media-center/events/2015/budget-certification.php

(upper right corner)

Any help would be appreciated.

[RioBrewster]

Of course as soon as I posted this I ran across a stack-overflow about why pseudo classed don’t work on img tags. :^P

Since everything is wrapped in a div anyway, it’s not terribly un-semantic.

Now I just have to responsively center it…

[Author]

Posts