Примерный набросок того, что нужно.
На месте красного фона будет изображение "Урок 2: бла-бла-бла". При наведении появляется форма, которая не должна исчезать, если в нее что-то вводится.
Пробовал делать через opacity (в примере).
Еще пробовал весь этот блок делать сразу form (без внешнего div), в нее фоном вставлять нужную картинку (вместо красного фона), а внутрь form класть скрытый div с полями ввода и кнопкой.
В обоих случаях ума не хватило.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.main {
width: 900px;
margin: 0px auto;
}
.video {
width: 560px;
height: 415px;
background-color: #eeeeee;
}
.subscribe {
width: 320px;
height: 415px;
float: right;
margin-left: 20px;
background-color: red;
}
p {
margin: 0px;
color: white;
}
form {
opacity: 0;
display: block;
width: 320px;
height: 415px;
background-color: #111111;
}
form:hover{
opacity: 1;
}
.email {
display: block;
width: 238px;
height: 40px;
padding: 0px 15px;
margin: 10px auto;
border:1px solid #aaaaaa;
}
.submit {
display: block;
width: 268px;
height: 43px;
margin: 10px auto;
border:1px solid #6c6f8e;
background-color: #6c6f8e;
color:#ffffff;
}
</style>
</head>
<body>
<div class="main">
<div class="subscribe">
<form>
<p>Здесь текст или список на всю длину блока до формы внизу</p>
<input type="text" class="email" placeholder="Введите email" />
<input type="submit" class="submit" value="Подписаться" />
</form>
</div>
<div class="video">Здесь видео</div>
</div><!-- .main -->
</body></html>
Если способ не найдется - сделаю на jQuery (палочка выручалочка для таких как я), но подключать всю библиотеку ради одной крошечной функции очень не хочется.