Где скачать скрипт такого оverlay?

Question

[Nina Blase]

Привет, колллеги! Подскажите пожалуйста где можно скачать скрипт такого оverlay: fagardesigns.com/portfolio
С помощью гугла ничего не удолось найти. Зарание спаисбо.

Comments

[Андрей Б.]

Не понятно что вам нужно. Интересует всплывающее окно или оранжевый блок при наведении?

[Сергей Горячев]

Андрей Б.: Я думал, что только мне не понятно написанное)))

[Villarou]

Поддерживаю комментарий выше

[Алекс К]

Sergey Goryachev: также)

[Nina Blase]

Андрей Б.: Интересует оранжевый блок при наведении + функция увеличения при нажатиии на лупу
и переход по ссылке. Вцелом навигация.

Answer 1

[Villarou]

Ховер простой: всего лишь анимация opacity от 0 до 1 при наведении. Внимательно посмотрите на разметку и стили и все станет понятно.
Увеличение - плагин PrettyPhoto

Про ссылку - а что в ней особенного?

UPD: вот вам код JS для overlay

$(window).load(function(){		   
	$(".portfolio-grid ul li .item-info-overlay").hide();
	if( is_touch_device() ){
		$(".portfolio-grid ul li").click(function(){							  
			var count_before = $(this).closest("li").prevAll("li").length;
			var this_opacity = $(this).find(".item-info-overlay").css("opacity");
			var this_display = $(this).find(".item-info-overlay").css("display");
			if ((this_opacity == 0) || (this_display == "none")) {
				$(this).find(".item-info-overlay").fadeTo(250, 1);
			} else {
				$(this).find(".item-info-overlay").fadeTo(250, 0);
			}
			$(this).closest("ul").find("li:lt(" + count_before + ") .item-info-overlay").fadeTo(250, 0);
			$(this).closest("ul").find("li:gt(" + count_before + ") .item-info-overlay").fadeTo(250, 0);	
		});	
	}
	else{	
			$(".portfolio-grid ul li").hover(function(){
				$(this).find(".item-info-overlay").fadeTo(250, 1);
				}, function() {
					$(this).find(".item-info-overlay").fadeTo(250, 0);		
			});
		}
});

Comments

[Nina Blase]

Задача решена. Спасибо!

Answer 2

[GoodProject]

CSS анимация элементов при наведении