<div id="gallery">
  <figure id="1">
    <img src="https://assets.codepen.io/652/the-lucky-neko-CM7a-XBD4AU-unsplash.jpg" alt="a white kitten with brown and black spots sitting with its paws slightly outstretched. " title="Photo by The Lucky Neko for Unsplash">
    <figcaption>Kitten: Ollie (12 Weeks)</figcaption>
  </figure>

  <figure id="2">
    <img src="https://assets.codepen.io/652/karsten-winegeart-NE0XGVKTmcA-unsplash.jpg" alt="a brown French bulldog puppy laying down and looking up with a hopeful look in its eyes. " title="Photo by Karsten Winegeart for Unsplash">
    <figcaption>Puppy: Barney (9 Weeks)</figcaption>
  </figure>

  <figure id="3">
    <img src="https://assets.codepen.io/652/kabo-NjWZ07sPEJE-unsplash.jpg" alt="A large long-haired orange cat with a white belly. " title="Photo by Kabo for Unsplash">
    <figcaption>Cat: Walter (5 Years) </figcaption>
  </figure>

  <figure id="4">
    <img class="colorturn" src="https://assets.codepen.io/652/giacomo-lucarini-7M0SG3ZKdlE-unsplash.jpg" alt="A light brown, long-haired chihuahua sitting next to three rubber duckies. " title="Photo by Giacomo Lucarini for Unsplash">
    <figcaption>Dog: Miss Sunshine (2 Years) </figcaption>
  </figure>

  <figure id="5">
    <img src="https://assets.codepen.io/652/sergey-semin-Y0WXj3xqJz0-unsplash.jpg" alt="A tabby kitten with green eyes. " title="Photo by Sergey Semin for Unsplash">
    <figcaption>Kitten: Reese (8 Weeks)</figcaption>
  </figure>

  <figure id="6">
    <img src="https://assets.codepen.io/652/jordan-bigelow-X5VoG4MA5aI-unsplash.jpg" alt="A light brown puppy standing on a white and tan woven pet bed. " title="Photo by Sergey Semin for Unsplash">
    <figcaption>Puppy: Bruce (10 Weeks)</figcaption>
  </figure>

</div>

body {
  background-color: #eee;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

#gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 75vw;
  margin: 20px auto;
}

figure {
  cursor: move;
  margin: 10px;
  padding: 0px;
  position: relative;
}

figure img {
  width: 100%;
}

img {
  filter: hue-rotate(10);
  padding: 0px;
  border: 3px solid #fff;
  box-shadow: 0px 0px 3px #ccc;
  z-index: -1;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.colorturn {
  filter: hue-rotate(330deg) saturate(0.8);
}

figcaption {
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  text-align: center;
  color: #5e423f;
  z-index: 1;
  padding: 9px 0px 11px 0px;
  text-transform: uppercase;
  font-size: 1vw;
  position: absolute;
  bottom: 6px;
}

@media screen and (max-width: 600px) {
  figcaption {
    font-size: 3vw;
  }
  #gallery {
    grid-template-columns: 1fr;
    width: 90vw;
  }
}

.heart::before {
  font-family: "FontAwesome";
  content: "\f004";
  top: 0.4em;
  left: 0.5em;
  color: #fff;
  z-index: 1000;
  font-size: 2vw;
  position: absolute;
  opacity: 0;
  transform: scale(0);
  animation: animat 4.5s ease-in-out forwards;
}

.dark::before {
  color: #5e423f;
}

@keyframes animat {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  10% {
    opacity: 1;
    transform: scale(1.2);
  }

  20% {
    opacity: 1;
    transform: scale(1);
  }
  
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

//Drag and drop Sortable.js
new Sortable(gallery, {
  swapThreshold: 1,
  animation: 150
});

//Add random heart
function heart_loop() {
  var number = 1 + Math.floor(Math.random() * 6);
  if (number == 1 || number == 5 || number == 6) {
    $("#" + number).addClass("heart dark");
  } else {
    $("#" + number).addClass("heart");
  }
  setTimeout(function () {
    $("#" + number).removeClass();
    heart_loop();
  }, 5000);
}

heart_loop();