Страница 1 из 11
Модератор форума: JonMagon 
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Появляющийся текст на картинке при наведении курсора (как сделать Появляющийся текст на картинке при наведении кур)
Появляющийся текст на картинке при наведении курсора
sergei201
Сообщений: 133
Репутация: 0
Уровень замечаний:

Сообщение # 1 | 00:10:01
как сделать Появляющийся текст на картинке при наведении курсора как у этого сайта? http://tushkan.net

Nexxus
Сообщений: 289
Репутация: 66

Сообщение # 2 | 00:42:26
Код
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<style>
.nexus_block{
   position:relative;
   width:240px;
   height:320px;
}

.nexus_block > img{
   width:240px;
   height:320px;
}

.nexus_block > .tooltip{
   display:none;
   width:inherit;
   text-align:center;
   background:rgba(255,255,255,0.8);
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
   padding:10px 5px;
}
.nexus_block:hover > .tooltip{display:block;}
</style>
</head>
<body>
<span class="nexus_block">
<img src="IMAGE_URL"/>
<span class="tooltip">Текст</span>
</span>
</body>
</html>
Сообщение отредактировал Nexxus - Четверг, 09 Окт 2014, 00:43:19
sergei201
Сообщений: 133
Репутация: 0
Уровень замечаний:

Сообщение # 3 | 17:46:27
Nexxus, а как добавить в информер чтобы при нажатии на картинку и на текст переходил на ту статью?

Nexxus
Сообщений: 289
Репутация: 66

Сообщение # 4 | 22:04:57
sergei201, '<span class="nexus_block">' замени на '<a class="nexus_block">'
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Появляющийся текст на картинке при наведении курсора (как сделать Появляющийся текст на картинке при наведении кур)
Страница 1 из 11
Поиск: