HTML and CSS Reference
In-Depth Information
#container
{
position: relative;
}
#overlay
{
background-color: white;
width: 480px;
height: 270px;
position: absolute;
left: 0; top: 0;
opacity: 0.0;
/* set up transition */
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#overlay:hover, #overlay:focus
{
opacity: 0.8;
}
#overlay h1, #overlay ul, #overlay p
{
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<video width="480" height="270" autoplay
poster="bigbuckposter.jpg"
tabindex="0" controls>
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
</video>
<div id="overlay">
<h1>Big Buck Bunny</h1>
<p>Another fine work from the Blender Institute</p>
<ul>
<li>Script and direction by: Sacha Goedegebure
(Netherlands)</li>
<li>Art direction: Andreas Goralczyk (Germany)</li>
