JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<a class="gallery_grid_item" href="#">
<img class="gallery_grid_image" src="http://d1qfo1bk8s78mq.cloudfront.net/uimg/5f9aa039ecf554f73312d912e22c516e.x355" />
<div class="gallery_grid_info">
<div class="trans_bg"></div>
<div class="content_over_transparent">
<p class="gallery_title">Finding your Perfect Red</p>
</div>
</div>
</a>

CSS

#gallery_grid .gallery_grid_item,#related_topics .gallery_grid_item,#popular_galleries .gallery_grid_item {
position:relative;
overflow:hidden;
display:block;
text-decoration:none;
}

#gallery_grid .gallery_grid_item {
width:288px;
height:260px;
box-shadow:0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);
transition:margin .1s;
-moz-transition:margin .1s;
-webkit-transition:margin .1s;
-o-transition:margin .1s;
margin:15px;
}

#gallery_grid .gallery_grid_item:hover {
margin:13px 15px 17px;
}

#gallery_grid .gallery_grid_image_wrapper {
width:100%;
height:190px;
overflow:hidden;
}

#gallery_grid .gallery_grid_image {
min-height:100%;
}

#popular_galleries .gallery_grid_item,#gallery_grid .gallery_grid_item {
border:1px solid #999;
}

#related_topics .gallery_grid_item {
border:0!important;
width:242px;
height:140px;
overflow:hidden;
background:#181818;
margin:0;
}

#popular_galleries .gallery_grid_item {
width:200px;
height:140px;
letter-spacing:-.05em;
background:#181818;
margin:0 0 15px;
}

#popular_galleries.upsell .gallery_grid_item {
height:200px;
}

#related_topics .gallery_grid_item:nth-child(even) {
border:1px solid #777!important;
border-width:0 1px;
}

#gallery_grid .gallery_grid_item:hover,#related_topics .gallery_grid_item:hover,#popular_galleries .gallery_grid_item:hover {
border:1px solid #86d3ff;
}

#gallery_grid .gallery_grid_image,#related_topics .gallery_grid_image,#popular_galleries .gallery_grid_image,#related_topics .gallery_list_image {
width:100%;
overflow:hidden;
opacity:.9;
filter:alpha(opacity=90);
transition:opacity .1s;
-moz-transition:opacity .1s;
-webkit-transition:opacity .1s;
-o-transition:opacity .1s;
text-align:center;
display:block;
margin:0 auto;
}

#gallery_grid .gallery_grid_item:hover .gallery_grid_image,#related_topics .gallery_grid_item:hover .gallery_grid_image,#popular_galleries .gallery_grid_item:hover .gallery_grid_image,#related_topics...