Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>making background opague on hover with css, css3 or jquery</title>
- <style type="text/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;
- }
- </style>
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('a').hover(function(){
- $('.background').css('opacity',0.2);
- }, function(){
- $('.background').css('opacity','');
- });
- });
- </script>
- </head>
- <body>
- <div class="content">Content<a href="">Link</a></div>
- <div class="background"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement