Привет, друзья. Обычно на веб странице, при наведении курсора
Айские притесы — это очень высокие скалы вдоль реки Ай. Великолепнейшие виды! Протяженность притесов примерно один километр.
Это уникальное творение природы и это кусочек моей малой Родины. В детстве бегали сюда купаться.
Готовый код
<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: 5%;
left: 2%;
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* выравнивание текста */
color: #fff; /* цвет текста */
background: black; /* фон блока с текстом */
-moz-transition:all ease .5s; /* Длительность Перехода*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.imm-tooltip:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Прозрачность при наведении мыши */
}
</style>
<br />
<div class="imm-tooltip">
<img alt="айские притёсы" src="адрес вашего изображения" /><span class="tooltip">здесь описание картинки
</span></div>
Айские притесы — это очень высокие скалы вдоль реки Ай. Великолепнейшие виды! Протяженность притесов примерно один километр.
Это уникальное творение природы и это кусочек моей малой Родины. В детстве бегали сюда купаться.
Готовый код
<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: 5%;
left: 2%;
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* выравнивание текста */
color: #fff; /* цвет текста */
background: black; /* фон блока с текстом */
-moz-transition:all ease .5s; /* Длительность Перехода*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.imm-tooltip:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Прозрачность при наведении мыши */
}
</style>
<br />
<div class="imm-tooltip">
<img alt="айские притёсы" src="адрес вашего изображения" /><span class="tooltip">здесь описание картинки
</span></div>
