Изображения с изплаващо описание

Здравейте, приятели. Нека да е добър денят ви. Как да се появи изплаваща подсказка с описание на изображенията, когато върху тях е курсорът на мишката.
Обикновено когато задържите курсора на мишката върху изображение на уеб страница, се появява текстът „Alt“ - алтернативно описание. То ще се извежда, ако потребителят не вижда изображението, защото то просто не му се показва. По правило това са 1-2 думи.

Изплаващо описание

Днес ще направим така, че когато задържите курсора на мишката върху изображението, да се появи пълното му описание. Нека не го бъркаме с „Alt“. Пълното описание може да е информация за това, което виждаме на изображението.
Това се прави доста просто и всичко лесно се настройва. В самия код има коментари за всички стилове, които могат да бъдат персонализирани, за да съответстват на вашия дизайн.

Вижте пример.

Град Тутракан-градът на залеза, риболова и Дунав. Градът е част от старобългарските крепости от времето на Първото българско царство, а името му отразява титла. „Тмутаракан“ е таркан-военноначалник на гранично подразделение.

Код

<style type="text/css">

.imm-tooltip {

position: relative;

margin: 10px auto;

}

.imm-tooltip img {

width:450px; /* ширина */

border:1px dashed #036; /* стил на рамка */

background-color:lightyellow; /* фон на изображение */

padding:5px;

}

.tooltip {

position: absolute;

width:320px; /* ширина на изплаващото описание */

font-size:15px; /* размер на шрифта */

font-family: Georgia;

top: 15%;

left: 2%;

filter: alpha(opacity=0);

opacity: 0;

padding: 6px;

text-align:justify; /* подравняване на текста */

color: #000; /* цвят на текста */

background: lightyellow; /* фон на блока с текста */

-moz-transition:all ease .2s; /* време на задържане*/

-webkit-transition:all ease .2s ;

transition:all ease .2s;

}

.imm-tooltip:hover .tooltip {

filter: alpha(opacity=70);

opacity: .7; /* прозрачност под курсор */

}

</style>

<div class="imm-tooltip">

<img alt="град Тутракан" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Y8Ho8ukqtERlmpop-poFU3-9hoCf0OolVprOZ4xgg3e85m71ikrOobP45MrsBt4mf4gWtHmpmnmY_X_U3mEb2U8-usehF_LYfW0WaweIhMWC5qtK-kymDPF38H46x7gSGKXQO-72T1g/h120/tutrakan-min.jpg" /><span class="tooltip">Град Тутракан-градът на залеза, риболова и Дунав. Градът е част от старобългарските крепости от времето на Първото българско царство, а името му отразява титла. „Тмутаракан“ е таркан-военноначалник на гранично подразделение.</span></div>

Настройки

Това, което е маркирано в червено трябва да се замени с необходимите ви Alt, адрес на изображението и описанието му.

Инсталиране

Готовият код с изплаващо описание на изображението се вмъква на правилното място в редактора на публикацията в HTML режим.

Идеята почерпих от Виктория Барад. Благодаря, Вика, за темата и кода! И не ми се сърди!

За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!