JSFiddle - React, Tailwind, and code Playground

by Kristina Groeger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container-three-col">
  <!-- one -->
  <div class="section-one feature-wrap" id="first">
    <img
      class="first-image"
      src="https://www.whirlpool.com/content/dam/business-unit/whirlpool/en-us/marketing-content/site-assets/page-content/refrigerator-sclp/Images/icemaker/freezer-detail.jpg"
    />
    <p class="overlay-text overlay-slide-one">
      <i class></i><span class="title">EZ Connect Icemaker Kit</span>
    </p>
    <div class="overlay-click" id="overlay-click-one" style="display: none">
      <p class="overlay-text-inner">
        <i class="hamburger" id="hamburger"></i
        ><span class="title">EZ Connect Icemaker Kit</span>
      </p>
      <p class="overlay-info">EZ Connect Icemaker Kit</p>
      <div class="yellow-line"></div>
      <p class="overlay-info">
        Forget about refilling ice trays by adding this optional icemaker.<br /><br />
      </p>
      <span class="button btn-decorative"
        ><a href="#" style="text-decoration: none">Link</a></span
      >
    </div>
  </div>
  <!-- two -->
  <div class="section-two feature-wrap" id="second">
    <img
      class="second-image"
      src="https://www.whirlpool.com/content/dam/business-unit/whirlpool/en-us/marketing-content/site-assets/page-content/refrigerator-sclp/Images/icemaker/freezer-interior.jpg"
    />
    <p class="overlay-text overlay-slide-two">
      <i class="hamburger"></i><span class="title">Dual Icemakers</span>
    </p>
    <div class="overlay-click" id="overlay-click-two" style="display: none">
      <p class="overlay-text-inner">
        <i class="hamburger" id="hamburger"></i
        ><span class="title">Dual Icemakers</span>
      </p>
      <p class="overlay-info">Dual Icemakers</p>
      <div class="yellow-line"></div>
      <p class="overlay-info">
        Store more than twice the ice so you're ready for company, filling
        coolers, and more.<br...

CSS

.container-three-col {
    display: flex;
    position: relative;
  }

  .section-one {
    margin-right: 10px;
  }

  .section-two {
    margin: 0 10px 0px 10px;
  }

  .section-three {
    margin-left: 10px;
  }

  .section-one,
  .section-two,
  .section-three {
    position: relative;
    display: flex;
    align-items: center;
  }

  i:before {
    font-family: "icons";
    content: "\f116";
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 6px;
    font-style: normal;
    display: inline-block;
    float: left;
    font-size: 10px;
    line-height: 1;
    transition: transform 0.5s ease-out;
    transform: none;
    vertical-align: baseline;
    font-weight: 300;
    color: white;
    margin-right: 10px;
  }

  .overlay-text {
    padding: 15px 25px;
    position: absolute;
    height: 55px;
    transition: height 0.5s, background-color 0.5s ease-in;
    cursor: pointer;
    text-align: left;
    background-color: rgb(70 70 70 / 85%);
    bottom: 0;
    left: 0;
    right: 0;
  }

  .overlay-text-inner {
    padding: 15px 25px;
    position: absolute;
    height: 55px;
    transition: height 0.5s, background-color 0.5s ease-in;
    cursor: pointer;
    text-align: left;
    background-color: rgb(70 70 70 / 85%);
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }

  .overlay-click {
    position: absolute;
    text-align: center;
    padding: 30px;
    background: rgb(70 70 70 / 85%);
    bottom: 0px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .overlay-info {
    color: white;
    font-size: 1.25em;
    line-height: 1.15em;
  }

  span.title {
    font-style: italic;
    color: white;
  }

  .yellow-line {
    width: 70%;
    height: 4px;
    border-radius: 2px;
    background-color: #eeb111;
    margin: 5px auto;
  }

  button {
    text-decoration: none;
  }

  .to-top {
    display: flex;
    height: 100%;
    background-color: rgba(70, 70, 70, 0.8);
 ...

JavaScript

// slide up
  $(document).ready(function () {
    $("#first").click(function () {
      $("#overlay-click-one").slideToggle("slow");
      // $(".overlay-slide-one").toggle("slow");
      $(".overlay-slide-one").toggleClass("goodbye");
    });
  });

  $(document).ready(function () {
    $("#second").click(function () {
      $("#overlay-click-two").slideToggle("slow");
      $(".overlay-slide-two").toggleClass("goodbye");
    });
  });

  $(document).ready(function () {
    $("#third").click(function () {
      $("#overlay-click-three").slideToggle("slow");
      $("p.overlay-slide-three").toggleClass("goodbye");
      // $( "p.overlay-slide-three" ).children().toggleClass("goodbye");
    });
  });

  // icon animate
  $(".feature-wrap").click(function () {
    $(this).find("#hamburger").toggleClass("icon-transform");
  });




  // old video modal
  // Get the modal
  const modal = document.getElementById("myModal");

  // When the user clicks the button, open the modal
  $("span#myBtn.button.btn-decorative").click(function () {
    event.stopPropagation();
    modal.style.display = "block";
  //   console.log("button clicked")
  });

  // When the user clicks on <span> (x), close the modal
  $(".close").click( function () {
    modal.style.display = "none";
  //   console.log("x clicked")
  });

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
      console.log("outside clicked")
    }
  };