<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
/*<![CDATA[*/
$(function () {
$('.demo').hover(function () {
$('.overlay').fadeIn('fast');
}, function () {
$('.overlay').fadeOut('slow');
});
});
/*]]>*/
</script>
<style>
/*<![CDATA[*/
.wrapper {
width: 500px;
margin: 0 auto;
}
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.demo-wrapper {
position: relative;
width: 322px;
height: 242px;
margin: 0 auto;
}
.demo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
border: 1px solid red;
background: #006699;
}
/*]]>*/
</style>
</head>
<body>
<div class="overlay"></div>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum erat vitae odio elementum mattis. Vivamus porta pharetra tincidunt. Aliquam faucibus sem eget sem commodo posuere. Vestibulum eleifend rhoncus enim, quis vehicula ligula ullamcorper sed. Morbi interdum, justo ac ullamcorper imperdiet, tellus lorem gravida elit, id facilisis justo justo non dui. Donec luctus eros et dolor pulvinar nec vestibulum nisl ullamcorper. Quisque dictum auctor suscipit. Suspendisse potenti. Aliquam diam diam, accumsan non viverra quis, tempus in felis. Donec ante urna, hendrerit ut iaculis non, tincidunt ut odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam varius luctus vestibulum. Aenean eleifend elementum orci, sit amet porttitor enim ultricies non.</p>
<p>Etiam lectus lacus, ornare quis placerat laoreet, venenatis ut urna. Duis faucibus imperdiet enim faucibus ultricies. Etiam placerat porta urna sit amet pretium. Integer tortor felis, laoreet a tincidunt vitae, pulvinar et nibh. Etiam erat magna, rutrum et laoreet a, cursus at nisl. Proin posuere semper sem, eu tempus quam malesuada eget. Sed vitae velit non sapien iaculis cursus. Nam massa elit, auctor ut fermentum a, venenatis at erat. Phasellus tincidunt, libero elementum sodales gravida, nisi massa posuere purus, id porttitor dolor justo ac libero. Cras ut mauris ut sem fermentum congue. Phasellus tincidunt odio sed ante ultricies sed pellentesque eros lacinia. Sed risus sapien, egestas quis dictum at, vulputate ac velit. Pellentesque eget nulla posuere lectus gravida lobortis. Donec dui dolor, placerat vitae ultricies vel, lobortis nec urna. Sed sodales nulla nec felis tincidunt rhoncus.</p>
<div class="demo-wrapper">
<div class="demo"></div>
</div>
<p>Integer mi ligula, commodo in eleifend ut, ultrices nec ante. Praesent vel nulla augue. Praesent imperdiet tellus id tortor placerat sit amet luctus leo sodales. Aliquam pharetra, nibh id tempus consectetur, mauris libero pretium diam, ac porta erat elit sed nisl. Pellentesque euismod, nibh id ultricies mollis, purus odio volutpat justo, congue consequat est justo vitae erat. Ut egestas, lacus sit amet eleifend interdum, urna leo vestibulum libero, non iaculis tellus est ut purus. Suspendisse egestas risus non ante tempor faucibus. Proin enim nisi, convallis eget auctor at, egestas vel diam. Quisque non urna eget nibh rhoncus malesuada. Ut eu turpis mi, in pharetra lacus. Sed vitae eros nec lectus ultricies tincidunt.</p>
<p>Sed orci justo, blandit vitae blandit non, pharetra sit amet elit. Mauris in sapien nibh. Mauris sagittis velit non nisi aliquet iaculis. Nulla neque magna, gravida non gravida ac, mollis ut augue. Cras pretium urna a lectus commodo tincidunt. Donec nisl lectus, vestibulum eu elementum sed, varius ut ipsum. Sed gravida, magna eget ornare dignissim, nisi magna semper dolor, nec tincidunt nibh mauris id dui. Cras laoreet, lectus ac mollis pharetra, mauris augue tincidunt sapien, vel imperdiet ipsum risus a ligula. Donec ac placerat justo. Nullam tristique euismod ligula. Mauris volutpat tincidunt urna, at accumsan ipsum blandit nec. Nullam pellentesque lacus faucibus nisl posuere lobortis eget egestas est. Sed bibendum, arcu vitae suscipit sagittis, leo nisl tincidunt lorem, nec porta neque leo a sem. Nam augue ante, sollicitudin at dapibus nec, ullamcorper non lacus.</p>
</div>
</body>
</html>
