SCSS - Background Image Transition

SCSS for a Background Image Transition

by pablosgpacheco

HTML

<div id="element">
  Hover Me
</div>

SCSS

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

#element{  
  @include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");
  width:500px;
  height:300px;
  line-height:300px;
  text-align:center;
  border:5px solid #ccc;
  cursor:pointer;
  color:#000;
  font-size:70px;
  text-transform:uppercase;
  text-shadow: 2px 2px #fff;
}