CSS: How to do image change on rollover

Question

I am trying to do a image change when the mouse rolls over the image, but I have to use CSS not java script. I got the image to show up, but it shows up behind the first image, it doesn't replace it.

<a href="http://google.com"><img id="rollover" src="cat.jpg" width="250" height="188" alt="Cat"></a>

#rollover:hover {background-image: url(dog.jpg);} 
img {padding: 5px;}

can you check this http://stackoverflow.com/a/23733994/861487 — Abdelouahab, Nov 28 '14 at 16:05
possible duplicate of [CSS: Change image src on img:hover](http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) — Simply Craig, Nov 28 '14 at 16:06

Eun · Accepted Answer · 2014-11-28T16:12:04.000

1

Don't use the img tag. Use the a itself:

a
{
    display:inline-block;
    width: 250px;
    height: 188px;
    background: red;
} 
a:hover
{
    background: blue;
}

<a href="http://google.com"></a>

edited Nov 28 '14 at 16:12

answered Nov 28 '14 at 16:07

Eun

4,146
5
30
51

score 0 · Answer 2 · answered Nov 28 '14 at 16:05

0

Set the first image via CSS also.

<a href="http://google.com"><div id="rollover" width="250" height="188"></div></a>

#rollover {
  background-image: url(cat.jpg);
}

#rollover:hover {
  background-image: url(dog.jpg);
}

answered Nov 28 '14 at 16:05

user1438038

5,821
6
60
94

What type of element did you use? ``img``, ``div`` or other? – user1438038 Nov 28 '14 at 16:08

chepe263 · Answer 3 · 2014-11-28T16:34:22.980

0

You could have two images and switch display property example

    #dog{
        display: none;
        }
    #cambio:hover > #cat{
        display: none;
    }
    
    #cambio:hover > #dog{
        display:block;
        
    }

   <a href="#" id="cambio">
        <input type="button" id="dog" value="Perro" />
        <input type="button" id="cat" value="Gato" />
    </a>

edited Nov 28 '14 at 16:34

answered Nov 28 '14 at 16:13

chepe263

2,774
22
38

Alessandro Marchisio · Answer 4 · 2014-11-28T16:20:32.533

0

You dont need anotehr element of A...

<a href="http://google.com" id="rollover"> </a>

#rollover {   background-image: url(cat.jpg); 
     width: 250px; height: 188px; 
     display: block;
}
#rollover:hover {   background-image: url(dog.jpg);  }

edited Nov 28 '14 at 16:20

answered Nov 28 '14 at 16:15

Alessandro Marchisio

535
3
11

here my jsfiddle: http://jsfiddle.net/alemarch/7vn10zx2/ I used background-color and border, but its the same.. – Alessandro Marchisio Nov 28 '14 at 16:23

CSS: How to do image change on rollover

4 Answers4