Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexible rollover image links

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #39026
    simoncmason
    Member

    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?

    #106625

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

    #106626
    simoncmason
    Member

    @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!

    #106630
    simoncmason
    Member

    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 …

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.