making background opague on hover with css, css3 or jquery

Question

What I am trying to achieve is to make the background of the whole page opaque, when I hover on an href. Something that when hovered that will trigger the body class to have a coloured background with opacity. Something like this below, however this does not work. I can only make it work within its contained div.

Is there is an easier method with css, or css3. It has to be a light weight method to achieve this. I am also wanting to place an image at the centre of the page. However this functionality is more important for the moment.

 $(function(){
$('a body').hover(function() { 
$('a', this).stop().animate({"opacity": 1}); 
 },function() { 
$('a', this).stop().animate({"opacity": 0.4}); 
});

I may not be totally understanding what your trying to achieve but why not just have a div that's width and height is set to 100% and 50% opcaity and display:none by default. When an href is hovered make that div visible. I don't know just a suggestion — Ryan Beaulieu, Jul 21 '12 at 15:55

score 1 · Answer 1 · answered Jul 21 '12 at 16:00

1

But do you want to do this with the body background? I don't think it will work, since the body background don't have a background (another layer below it). As you said, with a div it works properly. So, why don't you create a div and use it as a container for your entire body content and do the animation in it?

Something like:

<body>
    <div id="divToAnimate">
        <!-- your content here... -->
    </div>
</body>

answered Jul 21 '12 at 16:00

davidbuzatto

9,207
1
43
50

That might be the reason. I will give this a go. I was sure that it could work within the the body or a body class. – user1074541 Jul 21 '12 at 16:09

Dom · Answer 2 · 2012-07-25T17:56:57.700

0

Maybe something like:

$("a").hover{
$("#div-that-covers-the-area-you-wish-to-change").css({"background":"#fff"});
});

This requires that you include and appropriately reference the jQuery library and nothing will happen unless it is accessible. Might even look funny without it.

If the div you want to manipulate has an id use '#', if it has a class use '.'

edited Jul 25 '12 at 17:56

answered Jul 21 '12 at 16:38

Dom

2,275
3
24
34

score 0 · Answer 3 · edited May 23 '17 at 12:13

After many experiments and searching thru internet I found one nice solution based on css and jQuery. If you append one additional div to the body, then it can behave like a opaque background for your page. The div uses the following style:

CSS:

.background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA0SURBVBhXY/wPBA6eZxnQwYHtxgyM9h5n/oMkQBwYgClmQpdA5oMlcQHCkugOgvEZ8bkWAHInGVYp48cTAAAAAElFTkSuQmCC);
   /* These three lines are for transparency in all browsers. */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
   opacity:.5;
}

JavaScript:

$(document).ready(function () {
  $('a').hover(function(){
    $('.background').css('opacity',0.2);
  }, function(){
    $('.background').css('opacity','');
  });
});

example integration in HTML:

<body>
<div class="content">Content<a href="">Link</a></div>
<div class="background"></div>
</body>

Full test script is here.

WarrenBee · Answer 4 · 2012-07-21T18:45:54.640

0

I created something as a nice starting point for you. I used a transparent div to cover your background. When you hover something specific, the opacity of the overlay will change.

*I used the .stop() method to prevent a queue from multiple hovers.

http://jsfiddle.net/WarrenBee/88ry6/1/

edited Jul 21 '12 at 18:45

answered Jul 21 '12 at 18:39

WarrenBee

107
2
7

making background opague on hover with css, css3 or jquery

4 Answers4