CODEWITHSUNDEEP
htmlcsshover
user1374796
user1374796

Reputation: 1582

Show / Hide background image of div on hover

I'm currently trying to figure out if it is at all possible to show and hide the background image on a div with a hover state.
Here's some code: HTML

<div class="thumb">
    <div class="text">
        Header<br>
        Sub-header<br><br>
        Date
    </div>
</div>

<div class="thumb">
    <div class="text">
        Header<br>
        Sub-header<br><br>
        Date
    </div>
</div>

<div class="thumb">
    <div class="text">
        Header<br>
        Sub-header<br><br>
        Date
    </div>
</div>

CSS

.thumb {
    width: 400px;
    height: 250px;
    background-color: silver;
    font-weight: bold;
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.text {
    padding: 15px;
}

So essentially I want to alternate between a background image and the background color, so when you hover over the div the background image is show, and on mouseout the background image is hidden and you revert to the background colour (silver).
I found this was do-able via pseudo classes but as this is for a CMS site the images will be changed on the fly, therefore they'll have to be inserted via html:

style="background-image: url('insert url here')"

Is this at all possible to hide and show the background-image?

Upvotes: 1

Views: 16010

Answers (3)

tedski
tedski

Reputation: 2311

Are you against using Javascript (or jQuery)?

If not, I have a solution using the .hover() function in jQuery. You said you didn't want to add new classes for new images. So I'm proposing you store the urls in the .thumb elements.

HTML:

<div class="thumb" data-hoverimage="http://placekitten.com/250/400">
    <div class="text">Header
        <br>Sub-header
        <br>
        <br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/250/300">
    <div class="text">Header
        <br>Sub-header
        <br>
        <br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/400/250">
    <div class="text">Header
        <br>Sub-header
        <br>
        <br>Date</div>
</div>

I stored each thumbnail's url in the data-hoverimage attribute (it can be whatever you want).

Then, using jQuery, we can use the hover function. The first function is for when the cursor is over, the second for when the cursor is out.

$(".thumb").hover(function(){
    var imgurl = $(this).data("hoverimage");
    $(this).css("background-image", "url(" + imgurl + ")")
}, function(){
    $(this).css("background-image", "");
});

I have a working model here: http://jsfiddle.net/auURQ/

Upvotes: 2

JSW189
JSW189

Reputation: 6325

Is there any reason you cannot use the :hover pseudo-class to make the image appear/disappear when hovered?

For example:

div {
    background-image: none;
}


div:hover {
    background-image: url('insert url here');
}

Upvotes: 3

mohammad mohsenipur
mohammad mohsenipur

Reputation: 3149

use this css

.thumb:hover{
   background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
      width: 400px;
      height: 250px;
      background-color: silver;
      font-weight: bold;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
}

.text {
    padding: 15px;
}

if you have different image per Div You have two way for this

1)make a share css for them and dedicated css for on hover image 

#thumb1:hover{
   background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
#thumb2:hover{
   background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
      width: 400px;
      height: 250px;
      background-color: silver;
      font-weight: bold;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
}

.text {
    padding: 15px;
}

another way is use JS or JQuery Lib for set hover Event ,...

Upvotes: 0

Related Questions