css effects

reveal.css

.reveal {
  position: relative;
}

.reveal::after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0; 
  content: '';  
  background: 0 center no-repeat;  
  background-image: linear-gradient(90deg,rgba(36,101,178,0) 0%,rgba(36,101,178,1) 0%);  
  background-clip: border-box;  
  opacity: 0;  
  transition: none;
}

.reveal:hover:after {  
  opacity: 1;  
  background-position: 6rem center;  
  transition: background-position 1s ease-out;
}