CSS хак или CSS эффекты для твоего сайта

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

HTML
Первым делом создаем список картинок, которые мы будем преображать с помощью нашего плагина. Вот этот код прописываем на нашей страничке:

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

Как ты видишь, на рисунке, у нас существует одно изображение Это изображение просто прокручивается и показывает вторую свою часть, которая у нас сделана в черно-белом варианте.


CSS стиль плагина
Теперь скопируй и вставь на страничку стиль нашего плагина. Этот стиль нужно вставить между тегами HEAD.

jQuery
Подключаем плагин jQuery к нашей странице. Запихиваем этот между тегами HEAD.

Теперь отдадим команды jQuery. Пользуясь этим кодом jQuery реализует нам необходимые эффекты.

$(document).ready(function() {

$("ul.gallery li").hover(function() { //On hover...

var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

//Set a background image(thumbOver) on the  tag - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

//Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
});

});

---

Большой выбор партнерских программ на любой вкус!!!

---