• 15 Дек 2014г
• 60978
• 42
• Рубрика: Web-дизайн

Появление блока при наведении с помощью CSS

Доброго времени суток. 🙂
Сегодня хочу показать Вам два способа как можно организовать появление блока при наведении на другой блок, используя только CSS.

Первый способ, когда блок появляется как-бы поверх основного блока, но не выходя за его границы. Данный способ мне пригодился при создании темы для онлайн кинотеатра, а именно для организации появления знака play при наведении на постер фильма.

Второй способ по сути такой же, но в нем второй блок появляется в виде выноски.
И так приступим.

Способ номер один

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

1. HTML разметка

Тут все просто, нужно внутри одного div-а разместить второй как в примере ниже

<div class="holder">
<div class="block">
<h2>Пример</h2>
Пример блока, при наведении на который появляется другой блок.
</div>
</div>

2. Стили CSS

Тут тоже нет ничего сложного, просто прописываем стили для блоков. Для первого задаем размеры и position:relative
для второго position:absolute и позиционирование left, bottom, right, top, также свойство display:none.

.holder{
    position:relative;   
    width:300px;
    height:400px;
    background:#ff6600;
     margin:100px auto;
}
.block{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    top:0;
    background:rgba(255,255,255, 0.7);
    padding:5px;
    display:none;
}
.holder:hover .block{
    display:block;
}

Способ номер два

Данный способ по сути - то же самое, но с некоторым изменением стилей. Для удобства я поменял название классов, чтобы не запутаться.

1. HTML разметка

<div class="poster">
<div class="descr">
Какой-то текст который должен быть в блоке<br>
<a href="#">Интересная ссылка</a>
</div>
</div>

2. Стили CSS

.poster{
    position:relative;
    margin:100px auto;
    background:#ff6600;
    height:200px;
    width:150px;
}
.descr{
    display:none;
    margin-left:-350px;
    padding:10px;
    margin-top:17px;
    background:#f3f3f3;
    height:200px;
    -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    box-shadow:0 5px 5px rgba(0,0,0,0.3);
}
.poster:hover .descr{
    display:block;
    position:absolute;
    top:120px;
    z-index:9999;
    width:400px;
}

Можете все подогнать под свои нужды и если все сделали правильно, то у вас должно получится как в примере.

На этом Все, спасибо за внимание 🙂