Эффект основан на CSS спрайтах и jQuery, но для его создания нужно еще произвести некоторые приготовления. Данный эффект не рекомендуется использовать в крупных проектах, а вот для демонстрации портфолио он несомненно подойдет.
Исходники по просьбе автора урока не предоставляются.
Каркас делаем в HTML
Прежде всего создадим неупорядоченный список, который и станет фундаментом нашей галереи.
<ul class="gallery"><li>
<a href="#" class="thumb"><span>
<img src="image.gif" alt="" /></span></a><h2>
<a href="#">Image Name</a></h2>
</li>
</ul>
Заметьте, что каждое изображение заключено в теги <span>, которые необходимы для отображения картинки в состоянии по умолчанию. Посмотрите на рисунок снизу и вам сразу станет все понятно.
Каскадная таблица стилей
Свойства будем задавать, как и при создании обычной галереи, единственная особенность нашего кода в том, что мы разместили наши изображения в теги <span>, необходимые для применения эффекта только к выбранному изображению.
ul.gallery
{
width: 708px; /*--Регулируем ширину в соответствии со
сценарием--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li
{
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px
solid #ccc;
-moz-border-radius: 3px; /*--CSS3 закругленные
углы--*/
-khtml-border-radius: 3px; /*--CSS3 закругленные
углы--*/
-webkit-border-radius: 3px; /*--CSS3 закругленные
углы--*/
display: inline; /*--Настройка специально для IE6--*/
}
ul.gallery
li a.thumb {
width: 204px; /*--Ширина изображения--*/
height: 182px;
/*--Высота изображения--*/
padding: 5px;
border-bottom: 1px solid
#ccc;
cursor: pointer;
}
ul.gallery li span { /*--Выделяем изображение для
применения эффекта--*/
width: 204px;
height: 182px;
overflow:
hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333;
/*--Hover эффект для браузеров с отключенным js--*/
}
ul.gallery li h2
{
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0;
padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff;
/*--эффект легкого заострения--*/
}
ul.gallery li a {text-decoration:
none; color: #777; display: block;}Анимация посредством jQuery
Сперва подключаем библиотеку jQuery: вы можете либо скачать данный файл с сайта jQuery, либо воспользоваться услугами Google.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/
jquery.min.js"></script>
Суть приема заключается в заглушении пиктограммы, используемой по умолчанию и прикреплении к фоновому изображению тега <a>. Именно CSS Спрайты помогут нам сместить изображение на задний план, так чтобы пиктограмма в серых тонах могла просочиться вперед при наведении курсора мыши.
В коде скрипта есть все необходимые комментарии:
jQuery$(document).ready(function() {
$("ul.gallery li").hover(function() {
//при наведении курсора...
var thumbOver = $(this).find("img").attr("src");
//получает url изображения и
приписывает к нему свойство 'thumbOver'
//Прикрепляет фоновому изображению (помеченному thumbOver)
тег <a> - И задает позицию заднего плана
$(this).find("a.thumb").css({'background' :
'url(' + thumbOver + ') no-repeat
center bottom'});
//анимирует изображение, при помощи значения прозрачности
равное 0 (в итоге изображение исчезает)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //прячет изображение
});
} , function() { //при отведении курсора...
//возвращает цветное изображение
$(this).find("span").stop().fadeTo('normal', 1).show();
});
});
