Otvertka12335,
вариант ... картинка в центре окна по клику на preview ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* {
box-sizing: border-box;
}
.fixed-overlay {
position: fixed;
overflow: auto;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: auto 90%;
transform: scale(0);
transition: 1.2s ;
}
.fixed-overlay.open{
transform: scale(1);
transition-duration: .8s;
transition-timing-function:cubic-bezier(.18,1.59,.78,1.6);
animation: bc 1.2s ease-in-out forwards .8s;
}
.image {
margin:30px;
float:left;
cursor:pointer;
max-height:100px;
}
p{
height: 2000px;
}
@keyframes bc{
100%{
background-color: rgba(0, 0, 0, .8)
}
}
@-webkit-keyframes bc{
100%{
background-color: rgba(0, 0, 0, .8)
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var a = $(".fixed-overlay");
$(".image").on("click", function(e) {
var o = e.clientX + "px "+e.clientY + "px";
a.css({"background-image":"url(" + this.src + ")", "transform-origin" : o}).addClass("open");
});
a.on("click", function(b) {
a.removeClass("open");
});
});
</script>
</head>
<body>
<img src="http://superwall.us/wallpaper/y5e6_yt_iuyy_yut_abstract_fantasy-SKOI.jpg" alt="" class="image">
<img src="http://mtdata.ru/u18/photoD2A8/20290971193-0/original.jpeg" alt="" class="image">
<img src="https://img3.goodfon.ru/original/1920x1408/b/61/art-devushka-vzglyad-zrachok.jpg" alt="" class="image">
<p></p>
<img src="http://www.снежинки-добавил-dmytrij82-www.setwalls.ru/pic/201304/2560x1440/setwalls.ru-24633.jpg" alt="" class="image">
<img src="https://grandgames.net/puzzle/source/devushka_i_drakoni.jpg" alt="" class="image">
<img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-281479.jpg" alt="" class="image">
<div class="fixed-overlay"></div>
</body>
</html>