The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Cropping image with buttons 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):

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


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

    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

    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 :) (full page )

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed