Нужен дельный совет по анимации.
 

Всем привет. Столкнулся с проблемой такого характера.

Есть две картинки и кнопка, заключенны они в див. Анимация через viber.

Суть анимации: одна картинка изначально на весь див, при наведении курсора картинка меняется на другую и появляется кнопка. Все это выезжает в верх.

Проблема: принаведении все работает замечательно. А при клике на кнопку (на кнопке обработчик click) открывается overlay с картинкамиии текстом описания. И после закрытия этого overlay картинки в div-е отображаются на половину, тоесть видна только половина картинки первой и второй. А кнопка которая должна была быть в низу div-а находится по средине.

Кто чем может помочь, пожалуйста???
Заранее спасибо!!!!

У вас какая-то ошибка в коде.
Заранее незачто.

Во код который, может кто то скажет где ошибка, я уже пересмотрел перечитал, а так и не разобрал где здесь ошибка.

<div class="shop_image_holder">
	<span class="original_image">
		<img src="img/gir_shop.jpg">
	</span>
	<span class="hover_image">
		<img src="img/gir_shop1.jpg">
	</span>
	<a href="" class="bay_it inline-popups">купить</a>
</div>

$(".shop_holder").on('mouseenter', function () {
		$(this).find('.original_image').stop().animate({top:'-100%'}, 500);
		$(this).find('.hover_image').stop().animate({top:'0%'}, 500, "easeOutQuart");
		$(this).find('.bay_it').stop().animate({top:'76%'}, 500, "easeOutQuart");
	}).on('mouseleave', function () {
		$(this).find('.original_image').stop().animate({top:'0%'}, 500, "easeOutQuart");
		$(this).find('.hover_image').stop().animate({top:'100%'}, 500);
		$(this).find('.bay_it').stop().animate({top:'100%'}, 500);
	});

shop_image_holder
	height: 250px
	width: 250px
	overflow: hidden
	position: relative
	margin: 0px auto
	.original_image
		display: block
		position: absolute
		top: 0px
		height: 250px
		width: 250px
		img
			height: 100%
			width: auto
	.hover_image
		display: block
		position: absolute
		top: 250px
		height: 250px
		width: 250px
		img
			height: 100%
			width: auto
	.bay_it
		height: 24%
		width: 100%
		text-align: center
		font-weight: bold
		font-size: 19px
		padding: 6%
		text-transform: uppercase
		position: absolute
		outline: 0
		top: 100%

А при клике на кнопку (на кнопке обработчик click) открывается overlay с картинкамиии текстом описания. Вот код:

$(".inline-popups").magnificPopup({
	type:'inline',
	midClick: true
});

vovk_a,
Лучше ссылку на демо-онлайн страницу, ибо так дольше спрашивать!
Вряд ли кто из помогающих будет повторять Ваши эксперименты, вдобавок с установкой спецплагинов

Deff,
http://924950.giroboar.web.hosting-test.net/