Expand images
body {
padding: 1em;
}
/* Expand
_______________________*/
.img-full-container {
position: fixed;
z-index: 999997;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 5px;
text-align: center;
display: none;
cursor: pointer;
}
.img-full-container img {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
z-index: 999998;
}
.img-full-container .close {
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
text-align: right;
color: #fff;
font-size: 12px;
background-color: #1B1818;
padding: 0.5em;
width: 100%;
z-index: 999999;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
/**
* Required jquery
* Html <img class="expand" src="image.png">
*/
(function($){
$.each($('.expand'),function(i,obj){
$(obj).on('click',function(e){
e.preventDefault();
var link = ($(obj).attr('src')) ? $(obj).attr('src') : $(obj).attr('href') ;
$('.img-full-container').fadeIn();
$('.img-full-container img').attr('src',link);
});
});
// close preview
$('.img-full-container').on('click',function(e){
$('.img-full-container').fadeOut();
$('.img-full-container img').attr('src','');
var wait = setTimeout(function(){
$('.img-full-container').css('display','none');
},1000);
});
})(jQuery);
<p><img width="150" class="expand" src="https://images.unsplash.com/photo-1447876394678-42a7efa1b6db?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=1375" alt="" /></p>
<p><img width="150" class="expand" src="https://images.unsplash.com/photo-1447522200268-a0378dac3fba?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=1375" alt="" /></p>
<p><a class="expand" href="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=1375">
Expand this image link
</a></p>
<div class="img-full-container">
<img src="">
<div class="close">Click To Close</div>
</div>