Image Hover

Discussion in 'CSS' started by Kuna, Aug 15, 2009.

0
  1. #1
    I have image as link and I want to make it to change to other image when I hover it. how to do that using CSS
     
    Kuna, Aug 15, 2009 IP
  2. Rasczak

    Rasczak Peon

    Messages:
    131
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can use DIV with background set to your image. Next steps:

    1) prepare both image states in one image - horizontally or vertically aligned (should have the same dimensions)
    2) give your image element a class, e.g. "hoverimg"
    3) in CSS set width and height for the .hoverimg class
    4) then add background:url(_path_to_your_image/image.jpg) no-repeat
    5) new line - .hoverimg:hover {background-position:0 -"image height"px} - that's if the hover image is BELOW the non-hover state
    6) if the hover image is NEXT to the non-hover state, the background-position should be -"image width"px, 0

    pm me if you have problems...
     
    Rasczak, Aug 15, 2009 IP
  3. jamessy

    jamessy Peon

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You can use a background hover effect like Rasczak suggested but the only pain being is that this wont work in i.e 6
     
    jamessy, Aug 15, 2009 IP
  4. Kuna

    Kuna Well-Known Member

    Messages:
    426
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #4
    Ok, who still uses IE 6...
     
    Kuna, Aug 15, 2009 IP
  5. c4gamerz

    c4gamerz Well-Known Member

    Messages:
    294
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    110
    #5
    well their are still a lot of people who never bother to upgrade their browsers. So you may loose a potential customer.
     
    c4gamerz, Aug 15, 2009 IP