JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<!-- IMAGE CONTAINER -->
      <div class="image-container">
            <div class="image">
                <img src="http://www.placehold.it/188x188" />
                <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
            </div>
            
            <div class="image">
                <img src="http://www.placehold.it/188x188" />
                <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
            </div>
            
            <div class="image">
                <img src="http://www.placehold.it/188x188" />
                <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
            </div>
            
            <div class="image">
                <img src="http://www.placehold.it/188x188" />
                <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
            </div>
            
            <div class="image">
                <img src="http://www.placehold.it/188x188" />
                <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
            </div>
            
            <div class="image">
                <img src="http://www.placehold.it/188x188" />
                <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
            </div>
            
            <div class="image">
                <img src="http://www.placehold.it/188x188" />
                <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
            </div>
            
            <div class="image">
                <img...

CSS

/* Editable Multiple Image Area */
.image-container {
    width:100%; 
    margin:0; 
    padding:0; 
    height:360px; 
    overflow:hidden; 
    position: relative;
}
.image{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position:relative;
    float:left;
    width:25%;
    height:0;
    margin:0; 
    padding:0 0 25% 0;
}
.image img {position:absolute;z-index:1;left:0;top:0;width:100%; height: 100%;}
.image:hover div {display:block!important; }
.image img:hover div {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}
.hoverimg {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}