Treehouse: Grow your CSS skills. Land your dream job.

WP Image

  • # May 10, 2012 at 7:16 pm

    So I am working on a WP site and the issue I am having right now is that I have inserted an image into the pages, but I need it to have a cropped corner:

    The image is not part of any background and I need it so that each image I have uploaded will have a croped corner (which is a separate image) over the top. The site in question is:

    Pretty much all the images that are attached to a class, .size-medium, will have this cropped corner. Is there something I can use in css, or is that more of a jquery task? I have tried adding the crop mark as a background, which failed for obvious reasons. My programmer says he cannot make a div that deep into the content, so we cannot simply add both images inside of the div. And once we hand the site over to the college, we need it to be where they will not have to directly edit any of the images, the site will simply do it for them.

    Any input is always appreciative! So thanks in advance.

    Edit: We are currently working on the site also, so if you see random things appear/disapear I apologize in advance. Just ignore it and if anyone has an idea about the image problem, that is the main issue currently

    # May 10, 2012 at 7:25 pm

    hello Jeager !

    here in css tricks website, maybe you could check on tucked-corners

    # May 10, 2012 at 7:58 pm

    That would probably be able to be manipulated to what we are looking for. However I know the pseudo selectors are not the most well supported either. If it can be done without using css3, if anyone else has any ideas, would be great. Otherwise I’ll work on this in the meantime and see what I can come up with!

    # May 10, 2012 at 8:17 pm

    Well, I altered it to work like how I wish to see it. Now I need to see how compliant it is. We already said no to IE6, but not sure about what else we do not care about.

    Edit: actually this doesn’t seem to work. I altered it in a fiddle to the desired affect, however there is no div surrounding the image. So when applied to the image it does nothing.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.