<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spoilerific</title>
<style>
html {
padding:0;
margin:0;
width:100%;
height:100%;
}
body {
padding:0;
margin:100px auto;
width:1000px;
font:normal 16px Arial, sans-serif;
}
div.spoiler {
border:1px solid black;
width:80%;
margin:0 auto;
position:relative;
overflow:hidden;
}
div.spoiler div.view-protection {
background-color:#888;
width:100%;
height:50%;
position:absolute;
left:0;
z-index:100;
-webkit-transition:1s 0s;
-moz-transition:1s 0s;
}
div.spoiler div.view-protection.top {
top:0;
border-bottom:1px solid black;
}
div.spoiler div.view-protection.bottom {
bottom:0;
border-top:1px solid black;
}
div.spoiler:hover div.view-protection {
-webkit-transition:1s 1s;
-moz-transition:1s 1s;
}
div.spoiler:hover div.view-protection.top {
top:-50%;
}
div.spoiler:hover div.view-protection.bottom {
bottom:-50%;
}
div.spoiler div.text {
padding:10px 20px;
}
div.spoiler div.text > :first-child {
margin-top:0;
}
div.spoiler div.text > :last-child {
margin-bottom:0;
}
</style>
</head>
<body>
<div class="spoiler">
<div class="view-protection top"></div>
<div class="text">
<h1>Spoiler Alert!</h1>
<p>This is to demonstrate a pure mouse-over spoiler tag.</p>
</div>
<div class="view-protection bottom"></div>
</div>
</body>
</html>