imagr.css

body
{margin: 0;}
#prev{left: 2%;}
#next{right: 2%;}
.pn
{
  position: absolute;
  top: 50%;
  transition-duration: 1s;
  transform: translateY(-50%);
  width: 10%;
  min-width: 5vw;
  z-index: 4;
}
.bgdiv
{
  z-index: 1;
  filter: blur(20px) opacity(0.9);
  background-size: cover;
  transition-duration: 0.5s;
  opacity: 0;
}
.image{z-index:3}
.idiv, .bgdiv
{
  position: absolute;
  width: 100%;
  height: 100%;
}
.bgdiv.visible
{
  opacity: 1;
}
.image
{
  transition-duration: 0.25s;
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0.1);
  will-change: transform, opacity;
  opacity: 0;
}
.image.large
{
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}
img{border:none}