Первый способ, когда блок появляется как-бы поверх основного блока, но не выходя за его границы. Данный способ мне пригодился при создании темы для онлайн кинотеатра, а именно для организации появления знака 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; }
Можете все подогнать под свои нужды и если все сделали правильно, то у вас должно получится как в примере.
![Пример](https://gnatkovsky.com.ua/files/demo.png)
На этом Все, спасибо за внимание 🙂