» »

Появление картинка при наведении курсора для ucoz


Появление картинка при наведении курсора для ucoz

Это оригинальный скрип для сайта ucoz, где вы можете работать с картинками. А это вам не нужно много места и все будет на стилях css. Представлю два кода, это надпись, на которую нужно курсор повернуть и откроется картинка, можете хоть что написать. И второй вариант, это как размер Avarat, но можно выставить как вам нужно, и дальше, все делается как в первом случай и вот он скрин в полном размере. Применение его можно разместить как в мануале, да вообщем много везде, просто нужно включить фантазию.

В css

Код
/*Всплывающий скриншот*/  
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #3d3d3d;  
padding: 5px;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;  
-moz-border-radius: 4px 4px 4px 4px;  
-webkit-border-radius: 4px 4px 4px 4px;  
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{ /*CSS for enlarged image on hover*/  
visibility: visible;  
top: 0;  
left: 60px; /*position where enlarged image should offset horizontally */  
}  
/*---------------------*/


Теперь основа, где вы будете ставить ссылку и что главное можно написать описание и оно будет в низу.

Код
<a class="thumbnail" href="#">Ссылка на клик<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>


2

Код
<a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />Ваш текст</span></a>


Все делаем как написано.

Позаимствовал на сайте: Megascripts.ru

Смотрим: DEMO
24.03.2015 Просмотров: 552 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 29.03.2015 12:591
0
Не проверял, но думаю на модуле форум, будет работать.
avatar