Grow your CSS skills. Land your dream job.

Flexible rollover image links

  • # July 23, 2012 at 8:16 am

    So I have an image link which I want to reverse out on hover. Easy using CSS sprites but, then I need to set the width and height in px.

    Is there a way of doing this for a flexible / fluid site where everything is set in percentages?

    Pure CSS would be nice or is some javascript required?

    # July 23, 2012 at 9:33 am

    It seems like it wouldn’t be an issue.. Read this.

    # July 23, 2012 at 9:51 am

    @paintba11er89

    Thanks but that only deals with the position of the background image in the sprite – and assumes you have some content to give it space on the page.

    My problem is I want to use a background image as the content to create an image based button with a rollover. To do this I’d normally set the width and height of the anchor so it creates some space on the page, something like this:


    a.rollover-image {
    width:30px;
    height:30px;
    display:block;
    background: url ('my30x60image.jpg')
    background-position: 0 0;
    }
    a.rollover-image:hover {
    background-position: 0 30px;
    }

    But how do I make that work with percentages? If I fix the width and height of the buttons it will break the design of the container and I can’t set it in percentage as I don’t know what percentage the height will end up at.

    Hopefully I’m missing something really obvious here and enlightenment awaits!

    # July 23, 2012 at 11:57 am

    As far as I know, you can’t have a variable width/height if you’re trying to use an image. There’s ways to make a simple sprite that will allow you a variable width, but if you want the height to change as well, then you’d have to use pure css.

    You can make some pretty awesome buttons using just gradients/borders/shadows in css3.

    # July 23, 2012 at 12:41 pm

    Hi Chris,

    Yep, if it was width only I’d be laughing as all the widths are set in %. But the height won’t scale in line with the width …

    Got to use images for these buttons as they are icons that pertain to the client’s products.

    Can feel a slew of media queries coming on ! Ho hum …

    # July 23, 2012 at 1:00 pm

    Can I see what one of the buttons look like? Might help a little bit with a solution. Otherwise, yeah that might be a possibility.

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

You must be logged in to reply to this topic.

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