@nina0000000
Начинающий верстальщик

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

Привет, колллеги! Подскажите пожалуйста где можно скачать скрипт такого оverlay: fagardesigns.com/portfolio
С помощью гугла ничего не удолось найти. Зарание спаисбо.
  • Вопрос задан
  • 149 просмотров
Решения вопроса 1
VirmarY
@VirmarY
Full-stack web developer
Ховер простой: всего лишь анимация 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);		
			});
		}
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
GoodProject
@GoodProject
Верстальщик
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы