JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="gallery">

  <figure data-time="2016-12-19 13:10:48" data-title="IMG 115">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 115"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 23:58:10" data-title="IMG 019" duplicate>
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 019"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:42" data-title="IMG 016">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 016"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:10:02" data-title="IMG 019" duplicate>
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 019"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 05:33:32" data-title="IMG 013" duplicate>
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 013"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:37" data-title="IMG 020">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 020"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:31" data-title="IMG 014">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 014"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:16" data-title="IMG 011">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 011"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:26" data-title="IMG 013" duplicate>
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 013"></div>
    </a>
  </figure>

  <figure...

SCSS

FIGURE {
	border: 10px solid white;
	margin: 0;
  background: #D3D3D3;
  width: 25%;
  float: left;
  position: relative;
  overflow: hidden;
	
	&.duplicate {
		background: red;
		
	}
	
	&.latest-duplicate {
		background: green;
		
	}
  
  &:before {
    height: 0;
    width: 100%;
    padding: { top: 100%; }
    content: "";
    display: block;
    
  }
  
  > A {
    position: absolute;
    top: 5px; left: 5px; bottom: 5px; right: 5px;
    display: block;
    overflow: hidden;
    
    .translate {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translate(50%,50%);
      
      IMG {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        transform: translate(-50%,-50%);
        display: block;
        
      }
      
    }
    
  }
  
}

HTML {
	background: #ffffff;
	padding: 10px;
}

* {
	box-sizing: border-box;
}



.gallery {
  padding: 10px;
  overflow: hidden;
  
}

JavaScript

// reveal duplicated images and highligh latest
$('#reveal-duplicates').on('click', function() {

  // do stuff
  alert('Yep.. you clicked it');

});