Support » How-To and Troubleshooting » [Resolved] Adding overlay on images uploaded via page/post editor

[Resolved] Adding overlay on images uploaded via page/post editor

  • Hi all, I am working on a re-design of a website and had this cool feature worked out in photoshop and trying to see if there is a way to apply this to any images that are uploaded through the page/post editor. Im sure there is a way and I am just not wrapping my head around it but I currently have these images on the site hard coded in the template with a couple of divs and classes to display the corner effect applied to the images. I thought there would be a way to add it to the selectors using a background image and just use :before and :after but I could not get that working either. Is there a way to accomplish this effect either in CSS or through php to insert a div and class to that div before and after an image that is uploaded by the admin?

    The effect (hard-coded version) and test link can be found by clicking here I am sure there is a way as I have seen this on other sites, like I said I just cant wrap my head around how to do it.. 🙁

    Thanks for the help

Viewing 6 replies - 1 through 6 (of 6 total)
  • so I am able to do this with the pseudo class like this:

    .post_content p a:before {
        content: url("http://my-domain.com/wp-content/themes/my-theme/images/top-right.png") ;
        position: absolute;
        right: 25px;
        top: 26px;

    But how can I add a class to the anchor tag surrounding each image uploaded and inserted into post by the admin?

    Got it… Thanks

    Found solution here (JQuery solution since I already use lightbox and sass js) http://www.island94.org/2011/01/adding-class-to-wordpress-linked-images/

    So I thought I had this fixed 100% but it seems to be broken on Firefox, looks great in Chrome.. Is there something I am doing/not doing with my CSS to achieve this? If you look at this link then you will see what I mean.. Not sure why it breaks in FF, havent even checked safari or IE

    Moderator Andrew Nevins


    Forum moderator

    Resolve some validation errors before you expect to see a cross-browser-compatible website. Only after then should you be looking at why the CSS is causing it.

    Hey Andrew, thanks for the feedback.. The validator is usually the last step I take to close up any loose ends. So your telling me that you think those errors could be what is causing the break in FF because I dont see how that would effect one browser and not all. I could be wrong but I wanted your opinion if you think I should address that now and see if I get a fix or just wait until the site is done and get it verified with W3c?


    Just wanted to put this out there, fixed the errors and the problem still persists..

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Adding overlay on images uploaded via page/post editor’ is closed to new replies.