Выпадающий блок при наведении на родительский элемент

Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего сложного, но пригодится в будущем, чтобы не забыть, оставлю кусок кода здесь:

Стили:

.box-crew{
border:7px solid #B7ED92;
height:178px;
position:relative;
width:171px;
overflow:hidden;
}

.box-crew span{
background-color:rgba(0, 0, 0, 0.4);
top:-100px;
transition-duration:0.6s;
padding:10px 0;
position:absolute;
text-align:center;
color:#fff;
font-size:12px;
font-weight:bold;
line-height:16px;
margin:0;
display:block;
width:100%;
}

div.box-crew:hover span{
top:0;
}

HTML-код:

<div class="box-crew">
<img src="http://www.5nail.ru/wp-content/uploads/2012/03/nail1.jpg" alt="" />
<span>- 20% скидка<br /> Декоративный френч</span>
</div>

Пример реализации выпадающего блока – просто наведите курсор на картинку ниже:

– 20% скидка
Декоративный френч

Здесь самые важные моменты это:

transition-duration: 0.6s;

указывает с какой скорость элемент будет появляться, чем больше значение, тем медленнее будет выплывать блок и

background-color:rgba(0, 0, 0, 0.4);

это полупрозрачный темный фон для выпадающего блока. Вместо того, чтобы использовать картинки с альфа-каналом в формате gif или png, лучше задать такой полупрозрачный фон одной строкой в стилях без использования графических изображений.