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

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

Стили:

.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="https://denis-creative.com/wp-content/uploads/2021/12/pic.jpg" alt="" />
  <span>-20% скидка<br /> Декоративный френч</span>
</div>

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

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

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

transition-duration: 0.6s;

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

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

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

Овальная кнопка с помощью CSS

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…

Перевод кириллицы в UTF-8

В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…

Текстовые подстановки в HTML

Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе…

Скрипт для вычисления суммы всех полей

Пример, как сделать скрипт для суммы всех полей. При вводе в поле данных идет моментальный…

4 комментария

Павел

Спасибо, для новичка самое то)

Виктория

Что значит -100px для второго блока?

Наведите курсор на картинку — и вы увидите, что там сверху выпадает блок с текстом. Так вот этот блок сначала скрыт за основным блоком на 100px

.box-crew span{
  top:-100px;

А после наведения курсора на основной блок, текстовый блок появляется в области видимости:

div.box-crew:hover span{
  top:0;
}
Виктория

Спасибо за ответ

Ответить