HTML всплывающее окно

html 

Закрыть тег, Кнопка html, Кнопка html на сайт, кнопки html, кнопку html, код кнопки, открыть тег, html, html программирование. Кнопка html на сайт, код кнопки. Пояснение к коду кнопки html. Кнопка с текстом. Кнопка с рисунком. Пояснение к коду кнопки html. Кнопка с текстом. Спойлер, Код спойлера, спойлеры, со спойлером, установить спойлер, вставить спойлер, вставить спойлер на сайт. Кнопка с рисунком. Пояснение к коду кнопки html. Кнопка с текстом. Кнопка с рисунком. 

Всплывающее окно, при наведении на кнопку, картинку или текст

<div class="widget-inner">
   <div class="poster"><
   img src="/images/svg/111.jpg">
   <p style="margin-top:20px;font-size:18px;color:#000000;">
   Текст
   <br>Текст</p>
<div class="descr">Всплывающий текст<br></div>
</div>
   </div>
</div>

Разберем блок по пунктам

<div class="widget-inner"> (Открываем наш блок)               
   <div class="poster"> (класс задает стиль элемента)

   <img src="/images/svg/111.jpg"> (пишем путь к изображению)

   <p style="margin-top:20px; font-size:18px; color:#000000;">
                    отступ от верха; размер текста; цвет
   Пишем желаемый текст
   <br>его продолжение</p>  (<br> команда переносящая строку под предыдущую значений можно ставить столько сколько нужно)
<div class="descr">Пишем всплывающий текст<br></div>     
<div class="descr">(указывает стиль всплывающего окна) 
</div>
   </div>
</div>

css

стиль css (кнопка html)

.poster {
    cursor: pointer;
    margin-top: 45px;
    background: #fff;
    border: 1px solid #ebeced;
    border-bottom: 3px solid #ebeced;
    width: 200px;
    height: 100px;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
}

стиль css (всплывающее окно)

.descr {
    display: none;
    margin-left: -20px;
    padding: 10px;
    margin-top: 17px;
    background: #f3f3f3;
    height: 120px;
    -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);
    box-sizing: border-box;
    background: rgba(0,0,0,.8);
    border: 0 none;
    color: #fff;
}

Стили вставить в файл css.

Всплывающее окно при наведении на кнопку, картинку или текст. Разберем блок по пунктам,пишем путь к изображению, указывает стиль всплывающего окна. Всплывающее окно, Код, Код html, при наведении на кнопку, программирование, ссылка, html, html программирование.