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
  • #39026

    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?


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



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


    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.