Во код который, может кто то скажет где ошибка, я уже пересмотрел перечитал, а так и не разобрал где здесь ошибка.
<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
});
