Всплывающие подписи к изображениям

Всплывающие подписи к изображениям
Дата: 14 Декабря 2013, в 20:45
Рубрика: Вебмастерская
Просмотры: 3157

Интересный способ добавить всплывающие подписи к изображениям на ваш сайт, чтобы привлечь внимание и направлять пользователей на нужные страницы новости. При наведении курсора мыши на изображение выезжает краткое описание со ссылкой на подробную информацию.

Я люблю использовать jQuery и CSS для создания таких эффектов на веб-сайтах.

Приступим к установке этого эффекта:

Прежде всего на сайте должна быть поддержка jQuery, если у Вас этого нету тогда надо подключить перед тегом

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.6.1.js"></script>

Потом подключаем сам скрипт который и будет делать эффект всплывающей подсказки после jquery-1.6.1.js

<script type="text/javascript">
	$(document).ready(function(){
		$('.boxgrid.caption').hover(function(){
			$(".cover", this).stop().animate({top:'130px'},{queue:false,duration:160});
		}, function() {
			$(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
		});
	});
</script>

Теперь что бы все красиво выглядело оформим стили:

.boxgrid h3 {
	font-size:16px;
	font-family:Arial;
	font-weight:bold;
	color:#fff;
	margin:10px;
}
.boxgrid {
	float:left;
	width:280px;
	height:230px;
	margin:5px;
	border:10px solid #e6e6db;
	background:#161613;
	overflow:hidden;
	position:relative;
}
.boxgrid img {
	position:absolute;
	top:0;
	left:0;
	border:0;
}
.boxgrid img:hover {
	position:absolute;
	top:0;
	left:0;
	border:0;
}
.boxgrid p {
	font-size:13px;
	font-family:Arial;
	font-weight:bold;
	color:#fffccc;
	padding:0 10px;
	padding-left:25px;
}
.boxcaption {
	position:absolute;
	float:left;
	width:100%;
	height:100px;
	border-top:2px solid #fff;
	background:#0c4a17 url(arrow.png) -1px 40px no-repeat;
	opacity: .8;
}
.caption .boxcaption {
	top:190px;
	left:0;
}
.moreLink {
	display:block;
	position:absolute;
	width:68px;
	height:29px;
	background:url(more.png);
	text-indent:-9999px;
	top:65px;
	right:10px;
	outline:none;
}

Сохраним в файл style.css который так же подключим:

<link rel="stylesheet" type="text/css" href="style.css" />

Теперь когда подключили всплывающие подсказки перейдем к их выводу на сайт. Для этого нам потребуется разместить такой html код:

<div class="boxgrid caption">
	<img src="Ссылка на картинку"/>
	<div class="cover boxcaption">
		<h3>Название статьи</h3>
		<p>Краткое описание статьи</p>
		<p><a href="Ссылка на полное описание статьи" class="moreLink">More</a></p>
	</div>
</div>

Вот рабочий пример, в котором задействован эффект всплывающей подсказки с разными стилями оформления: