<div id="background"></div>

<div class="box">
  <img class="can" src="https://www.clipartmax.com/png/full/187-1871626_3d-watering-can-grass.png" alt="">
  <img class="drops" src="https://media1.giphy.com/media/Wmp1EOzVybWd13s5DB/giphy.gif?cid=ecf05e47981l4ghhf64caf9ocy1h0amzx171encag8xc1ff1&rid=giphy.gif&ct=s" alt="">
</div>

<div>
  <img class="mon1 trigger" src="https://www.seekpng.com/png/full/988-9881048_monstera-blad-roomit-nl-transparent-background-monstera-leaf.png" alt="">

  <img class="mon2 trigger" src="https://www.seekpng.com/png/full/988-9881048_monstera-blad-roomit-nl-transparent-background-monstera-leaf.png" alt="">

  <img class="mon3 trigger" src="https://www.seekpng.com/png/full/988-9881048_monstera-blad-roomit-nl-transparent-background-monstera-leaf.png" alt="">
</div>

<div class="notification">
  <img class="sparkle1" src="  https://media4.giphy.com/media/3OvvEXh9MU5246asQl/giphy.gif?cid=ecf05e47yggmnu9z8guha7wfx6gufm5ulz6bksg2rw31h6oy&rid=giphy.gif&ct=s" alt="">
  <img class="sparkle2" src="  https://media4.giphy.com/media/3OvvEXh9MU5246asQl/giphy.gif?cid=ecf05e47yggmnu9z8guha7wfx6gufm5ulz6bksg2rw31h6oy&rid=giphy.gif&ct=s" alt="">
  <img class="congrats" src="https://3dtext2gif.com/exported_stickers/_3dtext2gif_zjbkrzmrpyzx.gif" alt="">
</div>

<iframe class="bc" style="border: 0; width: 100%; height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/album=1365283899/size=small/bgcol=333333/linkcol=0f91ff/track=2006349628/transparent=true/" seamless></iframe>

index.html

html {
    background-color: black;
    width: 100vw;
    height: 100vh;
    font-size: 1vh;
    overflow: hidden;
    cursor: none;
  }

  .mon1 {
    height: 40rem;
    width: 40rem;
    position: fixed;

    top: 10rem;
    left: 80rem;
    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .mon2 {
    height: 30rem;
    width: 30rem;
    position: fixed;

    top: 40rem;
    left: 60rem;
    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .mon3 {
    height: 50rem;
    width: 50rem;
    position: fixed;

    top: 35rem;
    left: 20rem;
    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .mon1:hover {
    transform: translateX(3.3rem) translateY(4.5rem) rotate(15deg);
  }

  .mon2:hover {
    transform: translateX(3.3rem) translateY(4.5rem) rotate(15deg);
  }

  .mon3:hover {
    transform: translateX(6rem) translateY(8.5rem) rotate(25deg);
  }

  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 25rem;
    height: 25rem;
    transform: rotate(-20deg);
    pointer-events: none;
    z-index: 4;
  }
  .can {
    width: 20rem;
    height: 20rem;
    position: relative;
    left: 10rem;
  }

  .drops {
    width: 5rem;
    height: 20rem;
    transform: rotate(90deg);
    position: relative;
    bottom: 15rem;
    right: 0rem;
  }

  .notification {
    display: none;
    height: 95rem;
    width: 150rem;
  }

  .congrats {
    z-index: 5;
    position: absolute;
    left: 40rem;
    top: 25rem;
  }

  .sparkle1 {
    width: 20rem;
    height: 20rem;
    position: absolute;
    left: 20rem;
    top: 35rem;
  }

  .sparkle2 {
    width: 20rem;
    height: 20rem;
    position: absolute;
    left: 116rem;
    top: 35rem;
  }

  iframe {

  }

  #background {
    background-image: url(https://www.wallpaperup.com/uploads/wallpapers/2014/01/04/214741/c853f649ad4b03bd55160c69751343ea.jpg);
    z-index: 0;
    width: 90vw;
    height: 90vh;
    position:fixed;
    top:5rem;
    left:5rem;
    opacity: 50%;
    filter: blur(5px);
  }

  iframe{
  position:fixed;
  bottom:0;
  left:25rem;
    transform:scale(.75);

  }

index.css

$(document).bind("mousemove", function (event) {
    $(".box").css({
      top: event.pageY - $(".box").height() / 2,
      left: event.pageX - $(".box").width() / 2
    });
  });

  let counter1 = 0;
  $(".mon1").mouseenter(function () {
    counter1++;
    console.log(counter1);
    compare();
  });

  let counter2 = 0;
  $(".mon2").mouseenter(function () {
    counter2++;
    console.log(counter2);
    compare();
  });

  let counter3 = 0;
  $(".mon3").mouseenter(function () {
    counter3++;
    console.log(counter3);
    compare();
  });

  function compare() {
    if (counter1 == counter2 && counter2 == counter3) {
      show();
    }
  }

  function show() {
    // show div
    $(".notification").fadeIn("slow", function () {
      // wait for 5 seconds, 5 * 1000ms
      setTimeout(function () {
        hide();
      }, 5000);
    });
  }

  function hide() {
    // hide div again
    $(".notification").fadeOut();
  }

index.js