JSFiddle - React, Tailwind, and code Playground

by mvkleef

HTML

<script>
  $(function(){
    
    var $container = $('.gallery');
    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: 'img',
        columnWidth: 5,
      });
    })
    
  });
</script><ul class="gallery masonry" style="position: relative; height: 1299px;">
<li class="tooltip afb50">
	<img src="http://www.bouwhetzelf.nl/10-54-large/kraan.jpg" class="tooltip-toggle masonry-brick" data-toggle="tooltip" style="position: absolute; top: 0px; left: 0px;">
	<div class="tooltip-content">
		<section class="container">
			<span>Ieder jaar sluiten we af met een gezellig kerstdiner. Ieder teamlid krijgt een gang toebedeelt en mag dit naar eigen inzicht verzorgen. Hierdoor krijgt het kerstdiner regelmatig een verrassende wending.</span>
		</section>
		<footer>
			<span>Tekst</span>
		</footer>
	</div>
</li>
<li class="tooltip afb50">
	<img src="http://2.bp.blogspot.com/-Q6m8DmS6xRo/T2ZLT4eOS3I/AAAAAAAABaI/dUTW-Z_XpVg/s300/images-4.jpeg" class="tooltip-toggle masonry-brick" data-toggle="tooltip" style="position: absolute; top: 0px; left: 460px;">
	<div class="tooltip-content">
		<section class="container">
			<span>Omdat er bij sommige teamleden op culinair gebied nog wel wat bij te schaven valt hebben we, aansluitend aan onze strategiedag van 2008, een kookworkshop gehouden.</span>
		</section>
		<footer>
			<span>Tekst</span>
		</footer>
	</div>
</li>
<li class="tooltip afb50">
	<img src="http://2.bp.blogspot.com/-Q6m8DmS6xRo/T2ZLT4eOS3I/AAAAAAAABaI/dUTW-Z_XpVg/s300/images-4.jpeg" class="tooltip-toggle masonry-brick" data-toggle="tooltip" style="position: absolute; top: 0px; left: 0px;">
	<div class="tooltip-content">
		<section class="container">
			<span>Ieder jaar sluiten we af met een gezellig kerstdiner. Ieder teamlid krijgt een gang toebedeelt en mag dit naar eigen inzicht verzorgen. Hierdoor krijgt het kerstdiner regelmatig een verrassende...

CSS

.gallery img
{
	display: block;
	float: left;
	margin-right: 5px;
	margin-bottom: 7px;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url(desature.svg#grayscale);
	filter: gray;
	-webkit-filter: grayscale(1);
	-webkit-transition: -webkit-filter.6s ease; /* Fade to color for Chrome and Safari */
	-webkit-backface-visibility: hidden; /* Fix for transition flickering */
	position: absolute;
	top: 0px;
	left: 0px;
}

.gallery
{
	margin: 0;
	padding: 0;
    width: 640px;
}

.gallery li:hover img
{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: url(desature.svg#none);
	filter: none;
	-webkit-filter: grayscale(0);
}

.tooltip
{
	margin: 0px;
	float: left;
	position: relative;
	list-style: none;
}

div.tooltip-content{
	top: 40px;
	display: none;
	width: 388px;
	min-height: 113px;
	margin-left: 1px;
	color: #FFF;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
}

li.tooltip:hover div.tooltip-content{
	display: block;
	position: absolute;
	left: 25%;
	z-index: 5;
	top: 302px;
}

.tooltip-content:before
{
	content: '';
	display: block;
	margin-top: -20px;
	width: 0;
	height: 0;
	position: absolute;
	border: 10px solid #D80D32;
	left: 45px;
	top: 0px;
	border-color: transparent transparent #D80D32 transparent;
}

	div.tooltip-content .container
	{
		background: #d80d32; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background:...

JavaScript

/**
 * jQuery Masonry v2.1.07
 * A dynamic layout plugin for jQuery
 * The flip-side of CSS Floats
 * http://masonry.desandro.com
 *
 * Licensed under the MIT license.
 * Copyright 2012 David DeSandro
 */
(function(a,b,c){"use strict";var d=b.event,e=b.event.handle?"handle":"dispatch",f;d.special.smartresize={setup:function(){b(this).bind("resize",d.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",d.special.smartresize.handler)},handler:function(a,b){var c=this,g=arguments;a.type="smartresize",f&&clearTimeout(f),f=setTimeout(function(){d[e].apply(c,g)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Mason=function(a,c){this.element=b(c),this._create(a),this._init()},b.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{position:"relative"}},b.Mason.prototype={_filterFindBricks:function(a){var b=this.options.itemSelector;return b?a.filter(b).add(a.find(b)):a},_getBricks:function(a){var b=this._filterFindBricks(a).css({position:"absolute"}).addClass("masonry-brick");return b},_create:function(c){this.options=b.extend(!0,{},b.Mason.settings,c),this.styleQueue=[];var d=this.element[0].style;this.originalStyle={height:d.height||""};var e=this.options.containerStyle;for(var f in e)this.originalStyle[f]=d[f]||"";this.element.css(e),this.horizontalDirection=this.options.isRTL?"right":"left";var g=this.element.css("padding-"+this.horizontalDirection),h=this.element.css("padding-top");this.offset={x:g?parseInt(g,10):0,y:h?parseInt(h,10):0},this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";var...