lightbox

lightbox

by Victor

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed ullam dolorem ad eligendi accusamus explicabo, debitis in. Aut excepturi assumenda facere nihil. Quos, nam consectetur aut non blanditiis, ex dicta!</p>
<div class="lightbox">
  <span class="lightbox__shim"></span>
  <div class="lightbox__inner">
    <img src="http://via.placeholder.com/500x300" alt="test" />
  </div>
  <div class="lightbox__close">
    X
  </div>
  <div class="lightbox__control">
    <div class="lightbox__control__button">Download Now</div>
  </div>
</div>

SCSS

$spacing: 1rem;
@keyframes bounceInDown {
   0% {
      opacity: 0;
      transform: translateY(-100%);
   }
   33% {
      opacity: 1;
      transform: translateY(30px);
   }
   66% {
      transform: translateY(-10px);
   }
   100% {
      transform: translateY(0);
   }
} 

.lightbox {
  
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content:center; 
  
  
  &__shim {
    /* background: red; */
    width: 100%;
    height: 100%;
    position: absolute; top: 0;
    left: 0;
    z-index: 0;
  }
  
  
  &__inner {
    /* flex: 0 0; */
  /*   background: white;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100vh;
    align-self: center;
    padding: $spacing;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100vw; */
    z-index: 2;
    max-width: 100vw;
    max-height: 100vh;
    
    img {
    display: inline-block;
     max-width: 100vw;
    max-height: 100vh;
      
    }
  }
  
  &__close {
      position:absolute;
  top: 0;
  right: 0;
  color: white;
  width: auto;
  height: auto;
  /* background: red; */
  /* opacity: 0; */
  padding: 1rem;
  transform: translateY(-100%);
  transition: all 0.3s ease;
      -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            
            &:hover {
              cursor: pointer;
            }
  }
  &__control {
     background: blue;
  border-radius: 4px 0 0 0;
          position: absolute;
  bottom: 0;
 right: 0;

    &__button {

 padding: $spacing/2;
 font-size: 12px;
 color: white;
 
    }
  }
  
  
  &:hover {
    .lightbox {
      &__close {
     -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
      }
    }
  }
}