The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overlaying images without backgrounds

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #204098

    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:

    Here’s what I am trying to do:

    (upper right corner)

    Any help would be appreciated.


    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…

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.