CSS: background image issue

Question

I'm trying to get a background image to display when the mouse is hovered over any one of three images. Here is a jsFiddle: http://jsfiddle.net/cvh2013/gefKT/, can anyone tell me what I'm doing wrong please? At the moment the background image simply doesn't display when you hover any of the three circular images.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>SVG Included with <object> tag</title>

<style>
.center {
text-align: center;
}

#images:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
}
</style>
</head>

<body>
<table style="width: 100%">
    <tr>
        <div id="images">
            <td class="center"><object type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object></td>
            <td class="center"><object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object></td>
            <td class="center"><object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object></td>
        </div>
    </tr>
</table>

</body>
</html>

@JeffHawthorne file extension are really just for simple filesystems (and humans), if the web-server responds with the correct mime type then the browser will do the right thing — Jason Sperske
– Jason Sperske, Commented Mar 15, 2013 at 21:02

Marco Berrocal · Accepted Answer · 2013-03-15 21:04:05Z

2

If I was you I would change the CSS as follows:

<style>
.center {text-align:center;}
.boxy:hover {box-shadow:0 0 5px #000; border-radius:50%;}
</style>

And add the .boxy class to the object you have declared. Border Radius is much cleaner than to use an image (one more asset to load). You can use the actual image approach you wanted if you want this to work on IE8 and below.

Fiddle: http://jsfiddle.net/gefKT/9/

answered Mar 15, 2013 at 21:04

Marco Berrocal

3621 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Clive van Hilten Over a year ago

Thank you Marco, very useful to know.

James Coyle · Accepted Answer · 2013-03-15 21:00:08Z

0

The #images div contains nothing thus has no dimensions and therefore can never be hovered over. You need to place your three images inside this div.

answered Mar 15, 2013 at 21:00

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

Collectives™ on Stack Overflow

CSS: background image issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related