How to Link Background Image "On Hover"?

Hi Folks,

Question…

Please see this Fiddle

How do I alter the code so that:

  1. When you hover on the background image, it causes the spanned text to light up yellow (as hovering on just the text does now).
  2. Clicking on the background image takes you to the same link as the text (I want to link the background image to the same url).

Thanks!

You can try this:

#photobox:hover div p a {
    color: #FEF08A;
}

That will change the font color when hovering over the photobox element.

However, this isn’t the best practice since it indicates that the entire image area would be clickable when it really isn’t. So, I would recommend either enclosing the photobox with the anchor element instead, or make it a container element inside the photobox.

Hi, kerner.

I would suggest rearranging the boxes so they are all inside the anchor…
This is valid with an HTML5 doctype (like the one at the top of this example).


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1213248-How-to-Link-Background-Image-quot-On-Hover-quot
2014.06.23 19:59
kerner
-->
    <style type="text/css">
#photobox {
    border:solid 1px #ac9f87;
    float:right;
}
#photobox a {
    display:inline-block;
    vertical-align:top;
    color:#fff;
    text-decoration:none;
    margin:10px;
}
#photobox .box1 {
    background:url(http://www.4shared.com/download/AYaxfjrice/greenfield.jpg?lgfp=3000) no-repeat;
    width:232px;
    height:90px;
    position:relative;
}
#photobox span {
    background:#000;
    font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    position:absolute;
    left:0;
    bottom:0;
    padding:3px 6px;
}
#photobox a:hover {color:#fef08a;}

    </style>
</head>
<body>

<div id="photobox">
    <a href="http://torcchamber.org/sierra-country/us-national-forests/#Photo%20Gallery">
        <div class="box1"><span>Nature Photos</span></div>
    </a>
</div>

</body>
</html>

Thank you both …this is a big help! One more thing, if I may…

I’m not sure how to add additional boxes vertically (box2, box3) that link to other URLs (like this revised Fiddle) using the desired hover format.

Thanks again for your time :slight_smile:

In this example, I added “clear:right” to #photobox.

Since the image boxes are the same dimensions, I consolidated those styles in one selector that targets all ".box"es and assigned the different images to the numbered “.box” selectors.

See what you think:


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1213248-How-to-Link-Background-Image-quot-On-Hover-quot
2014.06.23 19:59
kerner
-->
    <style type="text/css">
#photobox {
    border:solid 1px #ac9f87;
    float:right;
    clear:right;
    margin-top:10px;
}
#photobox:first-child {margin-top:0;}
#photobox a {
    display:inline-block;
    color:#fff;
    text-decoration:none;
    vertical-align:top;
    margin:10px;
}
#photobox [class^="box"] {
    width:232px;
    height:90px;
    position:relative;
}
#photobox .box1 {
    background:url(http://www.4shared.com/download/AYaxfjrice/greenfield.jpg?lgfp=3000) no-repeat;
}
#photobox .box2 {
    background:url(http://www.4shared.com/download/-n4TyxfTce/bug.jpg?lgfp=3000) no-repeat;
}
#photobox .box3 {
    background:url(http://www.4shared.com/download/RPSkaGm3ce/bunny.jpg?lgfp=3000) no-repeat;
}
#photobox span {
    background:#000;
    font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    position:absolute;
    left:0;
    bottom:0;
    padding:3px 6px;
}
#photobox a:hover {color:#fef08a;}

    </style>
</head>
<body>

<div id="photobox">
    <a href="http://torcchamber.org/sierra-country/us-national-forests/#Photo%20Gallery">
        <div class="box1"><span>Nature Photos</span></div>
    </a>
</div>
<div id="photobox">
    <a href="http://torcchamber.org/sierra-country/us-national-forests/#Photo%20Gallery">
        <div class="box2"><span>Insect Photos</span></div>
    </a>
</div>
<div id="photobox">
    <a href="http://torcchamber.org/sierra-country/us-national-forests/#Photo%20Gallery">
        <div class="box3"><span>Animal Photos</span></div>
    </a>
</div>

</body>
</html>

Perfect! I appreciate your help, ronpat. I’m wondering, though …what is “[class^=“box”]”? I haven’t seen that before :confused: .

It’s one of a number of ways to refine your selectors. In this case, it’s targeting “any element that has a class name starting with box”.

So it would apply in situations like this:

<div class="boxofchocolates"></div>

<div class="boxyourears"></div>

<div class="box_model"></div>

<div class="box"></div>

Other similar selectors include

[attr$=“value”] - selects something ending with the value
[attr*=“value”] - selects something that includes the value anywhere

Ah… I see. Thanks for clarifying that, Ralph. …very helpful group here! :slight_smile: