JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<ul>
<li>
  <figure>
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <figcaption>Lorem ipsum dolor site</figcaption>
  </figure>
</li>
<li>
  <figure>
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <figcaption>Lorem ipsum dolor site</figcaption>
  </figure>
</li>
<li>
  <figure>
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <figcaption>Lorem ipsum dolor site</figcaption>
  </figure>
</li>
<li>
  <figure>
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <figcaption>Lorem ipsum dolor site</figcaption>
  </figure>
</li>
<li>
  <figure>
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <figcaption>Lorem ipsum dolor site</figcaption>
  </figure>
</li>
<li>
  <figure>
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <figcaption>Lorem ipsum dolor site</figcaption>
  </figure>
</li>
<li>
  <figure>
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <figcaption>Lorem ipsum dolor site</figcaption>
  </figure>
</li>
</ul>

CSS

* { margin: 0; padding: 0; }
body { font-family: San Fransisco, sans-serif; background: #FFF; transition: 0.3s all; }
.hovered figure { transform: scale(0.9); }
ul { list-style: none; }
li { float: left; width: 25%; overflow: hidden; }
figure { padding: 1em; transition: 0.3s all; z-index: 4; position: relative; }
figure:hover { transform: scale(1); z-index: 6; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
figcaption { font-size: 0.8em; font-style: italic; color: #999; }
img { width: 100%; height: auto; }

JavaScript

$(function() {

	$('figure').on('mouseover', function() {
	  $('body').addClass('hovered');
  });
	$('figure').on('mouseout', function() {
	  $('body').removeClass('hovered');
  });

});