change image when hover over, using CSS

Question

<!DOCTYPE html>
<html>
<head>
<style>

.main {
    background-image: url('a.jpg');
}

.main:hover {
    background-image: url('b.jpg');
}
</style>

</head> 
<body>
    <div class="main">
    </div>
</body>
</html>

When I load the page, my a.jpg didnt appear at all, hence no hover effect

Is it something wrong with my code?

http://jsfiddle.net/ZH9EL/6/

I changed the size of the main div and it worked just fine. Try your JSFiddle again to see if you get the same results. — GJK, Jul 18 '13 at 02:29
Sorry, I apparently don't know how to use JSFiddle. Here it is: http://jsfiddle.net/ZH9EL/3/ — GJK, Jul 18 '13 at 02:31
In the edited Fiddle, the only problem remaining is that the image location is incorrect. If you try pasting it into your browser and navigating there, then right-click on the image to get its location, you'll note it actually has an extra string appended at the end. Here's the example with the correct URL: http://jsfiddle.net/ZH9EL/5/ — Serlite, Jul 18 '13 at 02:36
Sorry I didn't see Serlite's comment until I posted. Give him credit. — LUKE, Jul 18 '13 at 02:44
The reason why it's not appearing to show up now is because the initial image is so large, only the corner of it shows - and that part is pure white. If you use `background-size:cover` for your element, it'll resize the image, and you'll see that they are in fact, both loading. Here: http://jsfiddle.net/ZH9EL/7/ — Serlite, Jul 18 '13 at 05:14

score 0 · Answer 1 · answered Jul 18 '13 at 02:40

0

Nothing is wrong with your code. The first image is being redirected to the main website so you don't have an image being loaded. You will have to host it locally. I used a different image and it works.

answered Jul 18 '13 at 02:40

LUKE

1,375
11
9

score 0 · Answer 2 · edited May 23 '17 at 11:57

No there is nothing wrong with your code, it could work, but I believe it is risky to use 2 images, if 1 is not loading it will not work...

You'd like to use two images but if hover image is taking to long to load or just not loading at all it will not work very well..

You might want to try Alois Mahdal's answer: https://stackoverflow.com/a/19967062/3217130 please read their reply..

Your css should be something like:

        <style>
        #main {
            width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
            background: url('a-b.jpg') no-repeat left top;
        }
        #main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
        </style>

This will work and will load normal and hover at the same time so you wont face problems with dns or server delay and other problems that could make pages look ugly if images are not loaded...

Please try Alois Mahdal's answer, this will work for you, if you don't understand how to create this for your images (a-b.jpg and new smaller but better code) then I would like to tell you how to do this with your images and classes and the result you need.. I create sprites with Paint .NET or I use spriteme.org to optimize CSS on running websites you can copy new css and images if you're using spriteme.org they will be created on the fly. There are lot's of ways to create or edit images...

I hope my answer was helpful to you,

Happy coding

you can use full http address to image or ./a-b.jpg to make sure the path to your image is correct.. — jagb, May 08 '14 at 23:17

change image when hover over, using CSS

2 Answers2