Want more features on Pastebin? Sign Up, it's FREE!
Guest

making background opague on hover with css, css3 or jquery

By: lalatino on Jul 21st, 2012  |  syntax: HTML  |  size: 1.19 KB  |  views: 42  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>making background opague on hover with css, css3 or jquery</title>
  5.   <style type="text/css">
  6.    .background {
  7.        position: absolute;
  8.        top: 0;
  9.        left: 0;
  10.        width: 100%;
  11.        height: 100%;
  12.        z-index: -1;
  13.        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA0SURBVBhXY/wPBA6eZxnQwYHtxgyM9h5n/oMkQBwYgClmQpdA5oMlcQHCkugOgvEZ8bkWAHInGVYp48cTAAAAAElFTkSuQmCC);
  14.        /* These three lines are for transparency in all browsers. */
  15.        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  16.        filter: alpha(opacity=50);
  17.        opacity:.5;
  18.    }
  19.   </style>
  20.   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  21.   <script type="text/javascript">
  22.     $(document).ready(function () {
  23.     $('a').hover(function(){
  24.         $('.background').css('opacity',0.2);
  25.     }, function(){
  26.         $('.background').css('opacity','');
  27.     });
  28.     });
  29.  </script>
  30. </head>
  31. <body>
  32. <div class="content">Content<a href="">Link</a></div>
  33. <div class="background"></div>
  34. </body>
  35. </html>
clone this paste RAW Paste Data