Hover div change background properties

Question

I have a div with a background image, but what I wanted is that when I hover that div, the background would turn with a filter transparent white (like 50% transparency), so we could see both the background and the image I have inside the div. I didn't want that this filter to affect the image inside it, only the background.

HTML:

<div class="col-xs-3 col-md-3 back-div">
    <img src="imgs/logo.jpg">
</div>

CSS:

    .back-div{
    background-image: url("../imgs/imgbg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

Is there any js framework to do this with some animations also?

Thanks

possible duplicate of [How to use 'hover' in CSS](http://stackoverflow.com/questions/905033/how-to-use-hover-in-css) — Liam, Jul 03 '14 at 15:20
I think you can do this in CSS but if you want jQuery is also an option (among the other frameworks as well). — webdad3, Jul 03 '14 at 15:22

score 0 · Answer 1 · answered Jul 03 '14 at 15:24

You could use some jQuery to modify the div.

 $(".back-div").css({ 'background': 'whatever'});

You can out it inside a function and you can play with it. It will give you a more personalized functionality.

If not, try play with this too (in CSS):

opacity: 0.4;
    filter: alpha(opacity=40);

score 0 · Answer 2 · answered Jul 03 '14 at 15:31

You must pretend the background by another internal div

<div class="your-cont">
    <div class="fake-bg"></div>
    <img src="imgs/logo.jpg">
</div>

CSS:

.your-cont {
     position:relative;
}
.your-cont:hover .fake-bg {
     opacity:0.5;
}
.fake-bg {
    position:absolute;
    z-index:-1;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

score 0 · Accepted Answer · answered Jul 03 '14 at 15:32

This can be achieved with some simple jQuery (allowing you to reuse it on multiple elements of similar structure). *I gave you jQuery because you asked form animation as well as the hover opacity effect and jQuery alleviates the various browser incompatibilities with css animations.

jsFiddle

New JS:

$(function(){
    $('.back-div').hover(function(){
        $('.back-div img').animate({opacity: 0.5},1000);
    }, function(){
        $('.back-div img').animate({opacity: 1},1000);
    });
});

New CSS:

.back-div img {  
    opacity: 1;
}

Hover div change background properties

3 Answers3