JSFiddle - React, Tailwind, and code Playground

HTML

<section id="columnfleet">    
            
                <h1>Our Fleet</h1>

                
            <ul class="gallery">
                                
                <li class="portfolioItem"><h2>Embraer Lineage 1000</h2>
                <div class="border"><div class="galleryinfo"><p><p>The Embraer Lineage 1000 is the only 1000 available for commercial charter within Europe. It is a beautiful large jet that will fly its passengers all around the world in supreme comfort. &nbsp; &nbsp; It has five separate zones, configured as follows: Zone 1: One double club seat with a conference table on the left [...]</p>
 </p></div></div><a href="http://www.jetbookingdirect.com/wp-content/uploads/2010/11/Cabin01small-300x200.jpg" rel="lightbox" title="Embraer Lineage 1000"><img width="300" height="200" src="http://www.jetbookingdirect.com/wp-content/uploads/2010/11/Cabin01small-300x200.jpg" class="attachment-post-thumbnail wp-post-image" alt="Lineage01small-300x200" title="Lineage01small-300x200" /></a>
                
                                
                <li class="portfolioItem"><h2>Embraer Lineage 1000</h2>
                <div class="border"><div class="galleryinfo"><p><p>The Embraer Lineage 1000 is the only 1000 available for commercial charter within Europe. It is a beautiful large jet that will fly its passengers all around the world in supreme comfort. &nbsp; &nbsp; It has five separate zones, configured as follows: Zone 1: One double club seat with a conference table on the left [...]</p>

 </p></div></div><a href="http://www.jetbookingdirect.com/wp-content/uploads/2010/11/Cabin01small-300x200.jpg" rel="lightbox" title="Embraer Lineage 1000"><img width="300" height="200" src="http://www.jetbookingdirect.com/wp-content/uploads/2010/11/Cabin01small-300x200.jpg" class="attachment-post-thumbnail wp-post-image" alt="Lineage01small-300x200" title="Lineage01small-300x200" /></a>
                
                </li>
                
           ...

CSS

ul.gallery {
    list-style:none;
    float:left;
    margin-left:0;
    margin-top:20px;
}

ul.gallery li {
    float:left;
    margin:10px;
    border-bottom:1px solid #d0d0d0;
    border-top:1px solid #f0f0f0;
    padding-top:5px;
    padding-bottom:10px;
}

ul.gallery img {
    z-index:888;
}

ul.gallery ul.meta {
    width:300px;
    margin-left:0;
    font-size:11px;
    list-style:none;
    padding-top:10px;
}

ul.gallery ul.meta li{
    float:left;
    margin:1px;
    margin-right:10px;
    color:#888;
    border-bottom:1px solid transparent;
    border-top:1px solid transparent;
}

.gallery h2 {
    padding-bottom:10px;

}

.border {
    position:absolute;
    width:298px;
    height:198px;
    display:block;
    z-index:999;
    -webkit-box-shadow: inset 0px 0px 0px 9px rgba(255, 255, 255, 0.25);
    -moz-box-shadow: inset 0px 0px 0px 9px rgba(255, 255, 255, 0.25);
    box-shadow: inset 0px 0px 0px 9px rgba(255, 255, 255, 0.25);
     -moz-transition:all 0.6s linear;
    -webkit-transition:all 0.6s linear;
    transition:all 0.6s linear;  
    border:1px solid transparent;
}

.border:hover {
     -moz-transition:all 0.25s linear;
    -webkit-transition:all 0.25s linear;
    transition:all 0.25s linear;   
    -webkit-box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.7);
    box-shadow: inset 0px 0px 0px 120px rgba(255, 255, 255, 0.7);
    background-color:#a0a0a0;
    border:1px solid #c0c0c0;
}

.galleryinfo {
    display:none;
    position:absolute;
    width:280px;
    height:180px;
    padding:10px;
    overflow:hidden;
}

.border:hover .galleryinfo {
    display:block;
}

a.fleetexcerpt {
    background: #e2e2e2;
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
    background:...