JSFiddle - React, Tailwind, and code Playground

HTML

<div id="photo_container">

<div class="lab_item">		
        <a class="hexagon_link" href="/about.php">
        <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background:#33a2f8;">                
                </div>
             </div>
         </div>
         </a>
         </div>
          <div class="lab_item">
          <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2 change" style="background-image: url('http://www.placekitten.com/260/300');">                
                </div>
             </div>
         </div>
         </div>
 <div class="lab_item">
          <a class="hexagon_link" href="/feed.php">
          <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background:#ee6557;">                
                </div>
             </div>
         </div>
         </a>
         </div>
 <div class="lab_item">
          <a class="hexagon_link" href="http://www.instagram.com/aao_movement">
          <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background:#c3c3c3;">                
                </div>
             </div>
         </div>
         </a>
         </div>
              <div class="lab_item">        
        <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background:#ee6557;">                
                </div>
             </div>
         </div>
         </div>
          <div class="lab_item">
          <div class="hexagon hexagon2">
            <div class="hexagon-in1">
                <div class="hexagon-in2 change" style="background-image: url('http://www.placekitten.com/260/310'); background-position:0px 80px;">                
                </div>
             </div>
         </div>
        ...

CSS

#photo_container {
	width: 860px;
	overflow: hidden;
	padding-bottom: 70px;
	position: relative;
	margin: 0 auto;
	margin-bottom: 2.5em;
}

.lab_item {
	width: 200px;
	height: 230px;
	position: relative;
	display: inline-block;
	margin:5px 5px 5px 0px;
}


.hexagon:hover, .hexagon_link:hover {
	opacity:0.7;
}
.hexagon_link {
	transition:0.3s linear opacity;
}
.hexagon2 {
	position: absolute;
	width: 200px;
	height: 400px;
	top: -85px;
}

.hexagon {
	overflow: hidden;
	visibility: hidden;
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
	cursor: pointer;
	transition:0.3s linear opacity;
}

.hex_text {
    width: 200px;
    height: 230px;
    z-index: 100;
    color: white;
    position: absolute;
    text-align: center;
}
.hex_text h1 {
    width: 100px;
    height: 115px;
    line-height: 140px;
    font-size: 16px;
    letter-spacing: 0px;
    margin: 0px auto;
	border-bottom:1px solid white;
}
.hex_text h2 {
    width: 200px;
    height: 95px;
    font-size: 18px;
    line-height: 22px;
    color: white;
    top: 0px;
    margin: 20px auto 0px;
}
.hex_text h3 {
    width: 100px;
    height: 115px;
    line-height: 140px;
    font-size: 40px;
    letter-spacing: 0px;
    margin: 0px auto;
	border-bottom:1px solid white;
	color:white;
}
.hexagon-in1 {
	overflow: hidden;
	width: 100%;
	height: 100%;

	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

.hexagon-in2 {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50%;

	-webkit-background-size: 125%;
	-moz-background-size: 125%;
	background-size: 125%;
	visibility: visible;

	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	transform:...

JavaScript

var images = [
    'http://placekitten.com/250/300',
    'http://placekitten.com/260/300',
    'http://placekitten.com/260/310',
    'http://placekitten.com/280/300',
    'http://placekitten.com/240/300',
    'http://placekitten.com/241/300',
    'http://placekitten.com/242/300',
    'http://placekitten.com/243/300',
    'http://placekitten.com/244/300',
    'http://placekitten.com/245/300',
    'http://placekitten.com/246/300',
    'http://placekitten.com/247/300',
    'http://placekitten.com/248/300',
    'http://placekitten.com/249/300'
];
    var i = 0;
    var allDivs = [];

function changeBackground() {
    allDivs = $(".hexagon-in2").each(function(){       
        setBG($(this),1000);
    });      
}

function setBG(div, time){
    var timeVar;
    clearTimeout(timeVar);
    
    if( div == undefined){
        return;   
    }
    div.css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
   });
   
    timeVar = setTimeout(setTimer, time);    
}


function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function setTimer(){
    var imageIndex = getRandomInt(0,allDivs.length);
    setBG($(allDivs[imageIndex]),3000);  
}

$(function(){          
    changeBackground();        
});