Cropping image with buttons ..in pure CSS

[kyvaith]

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.

[Paulie_D]

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.

[kyvaith]

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 :)

[Paulie_D]

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.

[kyvaith]

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? ;)

[kyvaith]

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

[Author]

Posts