13.11.2013
Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего сложного, но пригодится в будущем, чтобы не забыть, оставлю кусок кода здесь:
Стили:
.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>
Пример реализации выпадающего блока – просто наведите курсор на картинку ниже:

Декоративный френч
Здесь самые важные моменты это:
transition-duration: 0.6s;
указывает с какой скорость элемент будет появляться, чем больше значение, тем медленнее будет выплывать блок и
background-color:rgba(0, 0, 0, 0.4);
это полупрозрачный темный фон для выпадающего блока. Вместо того, чтобы использовать картинки с альфа-каналом в формате gif или png, лучше задать такой полупрозрачный фон одной строкой в стилях без использования графических изображений.
Комментарии (4) к “Выпадающий блок при наведении на родительский элемент”
Павел
Спасибо, для новичка самое то)
Виктория
Что значит -100px для второго блока?
Denis Creative
Наведите курсор на картинку – и вы увидите, что там сверху выпадает блок с текстом. Так вот этот блок сначала скрыт за основным блоком на 100px
А после наведения курсора на основной блок, текстовый блок появляется в области видимости:
Виктория
Спасибо за ответ