[resolved] Adding overlay on images uploaded via page/post editor (7 posts)

  1. DesignLoud
    Posted 3 years ago #

    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

  2. DesignLoud
    Posted 3 years ago #

    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?

  3. DesignLoud
    Posted 3 years ago #

    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/

  4. DesignLoud
    Posted 3 years ago #

    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

  5. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    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.

  6. DesignLoud
    Posted 3 years ago #

    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?


  7. DesignLoud
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic