This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!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