JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

HTML

<div id="col1" class="col"><p>ISIS Fighter</p></div>
<div id="col2" class="col"><p>Jihadi Bride</p></div>
<div id="col3" class="col"><p>Bakery</p></div>
<div id="col4" class="col"><p>Money</p></div>
<div id="col5" class="col"><p>Law & Order</p></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 110%;
    color: white;
} 



.col {
    width: 20%; 
    height: 100%;    
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;   
    
    /* we set it vissible in the animation */
    visibility: hidden;
    
   filter: grayscale(100%) brightness(50%) contrast(100%);   
       
}


.col:hover {    
    filter: grayscale(0%);    
    scale(5);
}


#col1 {
  left: 0;  
  background-image: url("http://doekewartena.nl/catalogtree/bbc/SCREENS/bbc150324-023.jpg"); /* Isis */
  /* name, duration, delay, itration-count, timing-function, direction */
  animation: a_col1_in 1s 0s 1 cubic-bezier(0.950, 0.050, 0.795, 0.035) alternate;
  background-position: 35% 0%;
}

#col2 {
   left: 20%; 
   background-image: url("http://doekewartena.nl/catalogtree/bbc/SCREENS/bbc150324-025.jpg"); /* Jihadi */
   animation: a_col2_in 1s 0.1s 1 cubic-bezier(0.950, 0.050, 0.795, 0.035) alternate;
   background-position: 98% 0%;
}

#col3 {
   left: 40%;
   background-image: url("http://doekewartena.nl/catalogtree/bbc/SCREENS/bbc150324-027.jpg"); /* Bakery */
   animation: a_col3_in 1s 0.2s 1 cubic-bezier(0.950, 0.050, 0.795, 0.035) alternate;
   background-position: 50% 0%;
}

#col4 {
   left: 60%; 
   background-image: url("http://doekewartena.nl/catalogtree/bbc/SCREENS/bbc150324-029.jpg"); /* Money */
   animation: a_col4_in 1s 0.3s 1 cubic-bezier(0.950, 0.050, 0.795, 0.035) alternate;
   background-position: 50% 0%;
}

#col5 {
   left: 80%;
   background-image: url("http://doekewartena.nl/catalogtree/bbc/SCREENS/bbc150324-0211.jpg"); /* Law and Order */
   animation: a_col5_in 1s 0.4s 1 cubic-bezier(0.950, 0.050, 0.795, 0.035) alternate;
   background-position: 80% 0%;
}






@keyframes a_col1_in {
    0% {
        visibility:...

JavaScript

// make them stay visible after the animation has ended
var elements = document.getElementsByClassName("col");

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.addEventListener("animationend", function() {
        this.style.visibility = "visible";
        
   }, false);    
}

// . . . . . . . . . . . . . . . . .

$(".col").click(function() {
    /*
    -Is there an animation in progress? store it in a boolean?
    
    -Let's first make it work for one before we deal with the problems...
    
    
    
    
    */
    
    console.log("click!");
    $(this).toggleClass("a_col_full");
    
    
});