Image hovering using html or css

By : akif
Source: Stackoverflow.com
Question!

I was trying to change an image on my page when i hover over it. I have also seen many examples about this and i'm still unable to make this work. Can anyone please tell me where am i going wrong?

Here is html my code:-

  <body>
        <a id="swap"> </a>
    </body>

css:-

 #swap {
        background-image:url('slide1.jpg');
    }

#swap:hover {
    background-image:url('slide2.jpg');
} 
By : akif


Answers

Try this:



This works

#swap {
   display: block;
   background: url('http://lorempixel.com/output/cats-q-c-100-100-8.jpg') no-repeat; 
}
#swap:hover {
   background: url('http://lorempixel.com/output/catsq-c-100-100-9.jpg') no-repeat;
}
By : Ed Heal


This video can help you solving your question :)
By: admin