How to change background image opacity on hover using jQuery

This article was written by in February 10, 2015, & may not be posted on other sites!
Original source url for this article: How to change background image opacity on hover using jQuery

How to change background image opacity on hover using jQuery
If you just spent hours searching for a solution you are not alone. Basically you can’t fade or change the opacity of a CSS background-image on hover, not even using jQuery. But you can achieve the same effect with some tips and tricks. This is how to change background image opacity on hover, or fade background image using jQuery:

How to change background image opacity on hover using jQuery

 

How to change background image opacity on hover using jQuery

Well, basically you can’t change background image opacity on hover, but you can give the illusion of doing so. A solution to this problem is to place several divs on top of each other using position absolute, and then fade in/out only the div holding the background image or image element. Make sure you have enabled jQuery before starting.
If you are using a CSS background-image inside the middle div instead of an actual image element, make sure to set a height to .background-image otherwise it won’t show.

HTML
<div class="my-wrapper">
<div class="my-background">
<img src="images/my-image.jpg" />
</div>
<div class="my-content">
<h1>A heading</h1>
<p>Some nice text</p>
</div>
</div>

CSS
.my-wrapper{
position: relative;
}
.my-background, .my-content{
position: absolute;
}
.my-background{
opacity: 0;
}

jQuery
$('.my-wrapper').mouseover(function() {
$(this).find('.my-background').stop().fadeTo('slow', 1);
});
$('.my-wrapper').mouseout(function() {
$(this).find('.my-background').stop().fadeTo('slow', 0);
});

 

 

Basic code to show or hide background-image on hover, using jQuery, no fade effect

$('.my-div').mouseover(function() {
$(this).css('background-image', 'url("/images/my-img.jpg")');
});


$('.my-div').mouseout(function() {
$(this).css('background-image', 'none');
});

A more dynamic automated example
If you are working with more complex code, for example php or WordPress, this solution might help to automate the background-image hover effect on several elements at once. For each item, collect your unique image url by adding an extra attribute, the “imgUrl”, something like this:
<div class="my-content" imgUrl="/images/my-img.jpg">Some text</div>
<div class="my-content" imgUrl="/images/my-img-02.jpg">Some text</div>
<div class="my-content" imgUrl="/images/my-img.jpg-03">Some text</div>

Or if you use php code, it might look something like this. Very usefull inside the wordpress loop for example, for each post echo:
<div class="my-content" imgUrl="<?php echo $imgUrl; ?>">Some text</div>

Then add this jquery functions in your js file to create the mouse over effect on all divs at once.
$('.my-content').mouseover(function() {
var imgUrl = $(this).attr('imgUrl');
$(this).css('background-image', 'url("' + imgUrl + '")');
});


$(.my-content').mouseout(function() {
$(this).css('background-image', 'none');
});

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *