Первый способ, когда блок появляется как-бы поверх основного блока, но не выходя за его границы. Данный способ мне пригодился при создании темы для онлайн кинотеатра, а именно для организации появления знака 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;
}
Можете все подогнать под свои нужды и если все сделали правильно, то у вас должно получится как в примере.
На этом Все, спасибо за внимание 🙂
