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?
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 10:31 am
This reply has been reported for inappropriate content.
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 :)
You must be logged in to reply to this topic.