Grow your CSS skills. Land your dream job.

Cropping image with buttons ..in pure CSS

  • # July 4, 2013 at 8:48 am

    Well… It’s propably not so easy without parent selector…

    This is what I have (yellow and red squares are my plus and minus buttons): http://jsfiddle.net/E2BUx/

    I need to cropp and uncropp image with plus and minus buttons. Do you have any idea how to do this in pure css?

    Thx.

    # July 4, 2013 at 8:52 am

    You only want to crop the top and bottom…is that right?

    Is this an inline image (``) or a background image?

    And by ‘crop’, do you mean hide part(s) of the image or shrink the size?

    I would also say that even if the effect were possible (depending on what it actually is) with CSS, the functioning would be better managed with Javascript/JQuery.

    # July 4, 2013 at 9:06 am

    I need to do this without any Javascript/JQuery.
    Jup, saying cropping I mean hide and show parts of image on top and bottom. And yes, I would like to manage both top and bottom div thesame time with plus and minus buttons.
    This is not an image, this is colored div :)

    # July 4, 2013 at 9:12 am

    It’s doable with a hover state: http://codepen.io/Paulie-D/pen/91469680e7698a28f9485c9b8b7dbb1a

    If you want clicking and incremental crops them I think JS is the only way to go.

    There *may** be a checkbox ‘hack’ to fake an On/Off switch but that would be for a ‘cropped or not’ option much like the hover state.

    # July 4, 2013 at 9:19 am

    Nice exeample! I’m actualy using a tabindex hack. You already can click the yellow button and top div moves up. Now I need to do this with both (top and bottom) divs, and it need to be reversible with minus button. Anyone? ;)

    # July 4, 2013 at 10:31 am

    here is an example that might interrest you. it is using transition , width different duration. checbox are used to trigger height size to show.No JS involved :)

    http://codepen.io/gcyrillus/pen/etxky (full page ) http://codepen.io/gcyrillus/full/etxky

    # July 4, 2013 at 10:51 am

    Beautifully. That’s what I meant. Thank you for your help!.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".