JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="gridawrap">
    <div class="grida">
        <div class="colu-2-4">
            <div class="gallery-item">
                <img src="http://dev.yesoffice.co.uk/assets/pdf/1.jpg">
                <figcaption class="img-title">
                     <h5>Accolade entrance to Avenue of Light</h5> 
                </figcaption>
            </div>
            <div class="colu-1-4">
                <div class="gallery-item">
                    <img src="http://dev.yesoffice.co.uk/assets/pdf/2.jpg">
                    <figcaption class="img-title">
                         <h5>16 seater main boardroom</h5> 
                    </figcaption>
                </div>
            </div>
            <div class="colu-1-4">
                <div class="gallery-itemr">
                    <img src="http://dev.yesoffice.co.uk/assets/pdf/3.jpg" class="right">
                    <figcaption class="img-title">
                         <h5>Avenue of light towards social area</h5> 
                    </figcaption>
                </div>
            </div>
        </div>
        <div class="colu-1-4">
            <div class="gallery-itemm">
                <img src="http://dev.yesoffice.co.uk/assets/pdf/4.jpg" class="middle">
                <figcaption class="img-title tall">
                     <h5>Social pods and Iconic artworks</h5> 
                </figcaption>
            </div>
        </div>
        <div class="colu-1-4">
            <div class="gallery-item">
                <img src="http://dev.yesoffice.co.uk/assets/pdf/5.jpg">
                <figcaption class="img-title small">
                     <h5>Social lounge</h5> 
                </figcaption>
            </div>
            <div class="gallery-item">
                <img src="http://dev.yesoffice.co.uk/assets/pdf/6.jpg">
                <figcaption class="img-title small">
                     <h5>New kitchen re-fit</h5> 
                </figcaption>
            </div>
            <div...

CSS

.gridawrap {
    width:920px;
}
[class*='colu-'] {
    float: left;
    padding:0;
}
[class*='colu-'] img {
    display:block;
}
[class*='colu-']:last-of-type {
    padding-right: 0;
}
.colu-row-1-4 {
    display:block;
}
.colu-1-4 {
    width: 230px;
}
.colu-2-4 {
    width:460px;
}
.grida:after {
    content:"";
    display: table;
    clear: both;
}


/* Uncomment everything commented to CSS for the hide/show */
 .gallery-item,
 .gallery-itemm,
 .gallery-itemr{
    float: left;
    position: relative;
    margin-bottom:5px;
}

 .gallery-itemr {
    float: right;
}

 .gallery-itemm {
    width:220px;
    margin-left:5px;
}
.gallery-item:hover .img-title,
.gallery-itemr:hover .img-title,
.gallery-itemm:hover .img-title{
    opacity: 1;
    background-color: rgba(0, 160, 224, 0.75);
}
.img-title {
    position: absolute;
    top: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    opacity: 0;
    /*display: none;  comment this out for CSS hover */
    background-color: rgba(0, 160, 224, 0);
    /*#00A0E0*/
    ;
    transition: all 0.5s ease;
}
.img-title h5 {
    position: absolute;
    color: #fff;
    top: 33%;
    width: 100%;
    text-align: center;
}

.img-title.small h5 {
    top:20%;    
}

.img-title.tall h5 {
    top:40%;    
}