JSFiddle - React, Tailwind, and code Playground

by Dalin Huang

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="pitches" style="font-size:0;height:100vh;overflow:hidden;">
</section>

CSS

section#pitches>div {
  width: 6.25%;
  display: inline-block;
}

section#pitches>div>div {
  cursor: pointer;
  opacity: 0.2;
  filter: gray;
  /* IE 6-9 */
  filter: grayscale(100%);
  /* Firefox 4+ */
  -webkit-filter: grayscale(100%);
  padding-bottom: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none;
  /* IE 6-9 */
}

JavaScript

const mydiv = '<div><div class="fade" style="background-image:url(http://withthefilm.com/images/startupmdpitches/I18kc_dYxrU.jpg);"></div></div>'

for (let i = 0; i < 500; i++) {
  $('#pitches').append(mydiv);
}