var mobileWidth = 768;
$(document).ready(function() {
$(".imgzoom ").click(function(){ // Событие клика на маленькое изображение
if(window.screen.width > mobileWidth){
var img = $(this); // Получаем изображение, на которое кликнули
var src = img.attr('src'); // Достаем из этого изображения путь до картинки
$("body").append("<div class='popupcon'>"+ // Добавляем в тело документа разметку всплывающего окна
"<img src='"+src+"' class='imgpopup' />"+ // Само увеличенное фото
"</div>");
$(".popupcon").fadeIn(500); // Медленно выводим изображение
$(".popupcon").click(function(){ // Событие клика на затемненный фон
$(".popupcon").fadeOut(500); // Медленно убираем всплывающее окно
setTimeout(function() { // Выставляем таймер
$(".popupcon").remove(); // Удаляем разметку всплывающего окна
}, 500);
});
}
});
});
.row {
height: 100%;
width: 3000px;
max-width: 100%;
background-color: blue;
}
.logo{
width: 100px;
height: 20px;
position: relative;
background-size: cover;
background-image: url(logo.png);
}
.logo__loaded{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0%;
background-size: cover;
background-image: url(logo2.png);
}
<div class="logo">
<div class="logo__loaded" style="70%"></div>
</div
<img width="20" height="20">