<div class="overlay"></div>
<div class="img"></div>

@import "lesshat";

.centered {
  .transform(translate(-50%, -50%));
  position: fixed;
  top: 50%;
  left: 50%;
}

body{
  overflow: hidden;
  background-color: #333;
}

.img{
  .centered;
  cursor: pointer;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  background-image: url(https://ununsplash.imgix.net/reserve/tdedkQnQGCgIhk9eoEkP_DSC_0983.JPG?q=75&fm=jpg&s=6a5691b52e0f3dcb148472b085d938c3);
  .transition(200ms ease);
  &.zoomed{
    width: 90%;
    height: 80%;
  }
  
}

.overlay{
  .transition(50ms);
  .centered;
  opacity: 0;
  width: 110vw;
  height: 110vh;
  background-image: url(https://ununsplash.imgix.net/reserve/tdedkQnQGCgIhk9eoEkP_DSC_0983.JPG?q=75&fm=jpg&s=6a5691b52e0f3dcb148472b085d938c3);

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  .blur(15px);
  
  &.active{
    .transition(1000ms ease);
    opacity: .8;
  }
}

$('.img').on('click', function(){
  $(this).toggleClass('zoomed');
	$('.overlay').toggleClass('active');
});