badapple

HTML

<div class="appleContainer">
  <details open>
    <summary class="badApple">
      <p class="badText">
        Click
      </p>
      <img class="badImage" src="https://ella.janitorai.com/background-image/ndKavaPTUTV730hW04vot.webp">
    </summary>
    <div class="gifContainer">
      <img src="https://i.pinimg.com/originals/11/3c/37/113c37e46e35619ae54f555f1d7cc92e.gif">
    </div>
  </details>
</div>

<!-- Being in the <details> keeps the gif from starting until the <details> is opened -->

CSS

.appleContainer summary {
    opacity: 0.5;
    cursor: pointer;
    border-radius: 100%;
    transition: all 200ms;
  }

  .appleContainer summary:hover {
    opacity: 0.8;
    transition: all 200ms;
  }

  .appleContainer {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 25;
  }

  .badApple:first-of-type {
    list-style: none;
  }

  .badApple+* {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    bottom: 0;
    padding: 1rem;
    padding-top: 3rem;
    background: #000;
    color: #fff;
    overflow-y: auto;
    opacity: 80%;
    z-index: -1;
  }

  .badImage {
    position: relative;
    width: 100px;
    border-radius: 100%;
    opacity: 80%;
    transition: all 100ms;
  }

  .badText {
    position: absolute;
    left: 50%;
    top: 50%;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
  }

  .gifContainer {
    border-radius: 0;
  }

  .gifContainer img {
    display: fixed;
    border-radius: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    top: 0px;
    left: 0px;
    overflow: visible;
  }