JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div id="wrapper"><div id="list">





<div>
<div class="centerDiv">
<div class="content">The alt attribute specifies an alternate text for an image, if the image cannot be displayed.</div>
</div>
<img class="imggrid" src="http://s5.favim.com/orig/141028/coffee-fashion-girl-grunge-Favim.com-2187377.jpg" />
</div>

<div>
<div class="centerDiv">
<div class="content">The alt attribute specifies an alternate text for an image, if the image cannot be displayed.</div>
</div>
<img class="imggrid" src="http://images0.chictopia.com/photos/highglossfashion/5948104335/high-gloss-fashion-dress_400.jpg" />
</div>







</div></div>

CSS

body
{ background: #f1f1f1; }


#wrapper { max-width: 1260px; margin: 0 auto; }

#list {
overflow: hidden;
margin-bottom: -30px; 
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 30px;
column-fill: auto;
}


.imggrid { width:100%; padding:10px;}

.imggrid:hover{ opacity: 0.9; }


.item { vertical-align: top; display: inline; margin-bottom: 30px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; }

@media only screen and ( max-width: 1024px ) {
#wrapper { max-width: 860px; margin: 0 auto; }
#list { -webkit-column-count: 2; -webkit-column-gap: 15px; -moz-column-count: 2; -moz-column-gap: 15px; column-count: 2; column-gap: 15px; }
.item { margin: 0px auto 15px auto;}
}


@media only screen and ( max-width: 600px ){ 
#wrapper { max-width: 440px; margin: 0 auto; }
#list { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; } 

}




div { position:relative; display:inline-block; vertical-align:middle; }
.centerDiv{ position:absolute; left:50%; top:50%; }

.container { text-align:center; }

.centerDiv {
content: attr(alt);
height:80%;
width:80%;
margin: 0 auto;
position:absolute;
top:10%;
left:10%;
background:rgba(255, 255, 255, 1);
text-align:center;
padding:15px;
color:black;
display:inline-block;
box-sizing:border-box;
opacity:0;
transition: 0.4s all;
-webkit-transition: 0.4s all;  
-moz-transition: 0.4s all;
}

.centerDiv:hover { opacity:1; }

.content{ top: 50%; transform: translateY(-50%); position:relative; }
}