JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<header>
  <h1>Animals</h1>
</header>

<main>
  <div id="animals">
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Mackerel_tabby_cat_pair-Hisashi-01.jpg" alt="cats" />
      <figcaption>
        Domestic cats are valued by humans for companionship and their ability to hunt rodents.
      </figcaption>  
    </figure>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/7/76/Two_puppies_dogs.jpg" alt="dogs" />
      <figcaption>
        The coats of domestic dogs are of two varieties: "double" being familiar with dogs (as well as wolves) originating from colder climates, made up of a coarse guard.
      </figcaption>  
    </figure>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/The_pair_of_ducks.jpg" alt="ducks" />
      <figcaption>
        Duck is the common name for numerous species in the waterfowl family Anatidae which also includes swans and geese.
      </figcaption>  
    </figure>
    <div class="caption">fdfg</div>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS

BODY {
  margin: 0;
  padding: 10px;
  font-family: sans-serif;
  font-weight: normal;
}

header {
  width: 100%;
}

#animals {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

#animals figure {
  display: block;
  margin: 0;
  padding: 0 5px;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#animals figure img {
  display: block;
  width: 100%;
}

#animals figure figcaption {
  display: none;
}

#animals .caption {
  background: red;
 flex-basis: 100%;
}

JavaScript

let selected_animal = "Animals"

// Hover Function

$("#cats_image").mouseover(function() {
  $("h1").text("Cats");
});

$("#dogs_image").mouseover(function() {
  $("h1").text("Dogs");
});

$("#ducks_image").mouseover(function() {
  $("h1").text("Ducks");
});

$("img").mouseout(function() {
  $("h1").text(selected_animal);
});


// Click Function

$("#cats_image").click(function() {
  selected_animal = "Cats"
  $("h1").text("Cats");
  $("footer div").removeClass("show");
  $("#cats_text").addClass("show");
});

$("#dogs_image").click(function() {
  selected_animal = "Dogs"
  $("h1").text("Dogs");
  $("footer div").removeClass("show");
  $("#dogs_text").addClass("show");
});

$("#ducks_image").click(function() {
  selected_animal = "Ducks"
  $("h1").text("Ducks");
  $("footer div").removeClass("show");
  $("#ducks_text").addClass("show");
});


// White Area Click Function

$("body").click(function() {
  event.stopPropagation();
  // ???
});