galaxy/Tooltips/SmookyDev_itchy-newt-24.html

<!-- From Uiverse.io by SmookyDev  - Tags: tooltip, animation, transition, advanced, tailwind -->
<div class="flex flex-col items-center group cursor-pointer font-mono">
  <div
    class="relative px-6 py-2 after:absolute after:inset-0 z-50 w-full h-full after:bg-gradient-to-b after:from-rose-500 after:to-rose-500 after:hover:transition-all after:hover:translate-y-0 after:-z-10 after:-translate-y-[95%] after:hover:duration-[3s] text-center text-rose-300 overflow-hidden transition-all text-2xl"
  >
    Blink 😀
  </div>

  <div
    class="absolute group-hover:mb-10 -translate-y-[150%] group-hover:-translate-y-full flex-col items-center duration-1000 group-hover:duration-700 group-hover:flex group-hover:opacity-100 transition-all group-hover:transition-all"
  >
    <div
      class="transition-all h-10 duration-1000 grid grid-cols-12 grid-rows-4 group [&amp;_div]:w-full [&amp;_div]:text-transparent w-full [&amp;_div]:h-full [&amp;_div]:bg-rose-500 [&amp;_div]:text-center [&amp;_div]:flex [&amp;_div]:items-center [&amp;_div]:justify-center [&amp;_div]:text-[5px] [&amp;_div]:transition-all [&amp;_div]:duration-500 group-hover:[&amp;_div:nth-child(even)]:-skew-x-6 group-hover:[&amp;_div:nth-child(odd)]:bg-rose-700 group-hover:[&amp;_div:nth-child(even)]:bg-rose-700 group-hover:[&amp;_div:nth-child(odd)]:duration-500 group-hover:[&amp;_div:nth-child(even)]:duration-700 group-hover:[&amp;_div:nth-child(odd)]:animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] group-hover:[&amp;_div:nth-child(even)]:animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] group-hover:-translate-y-0 translate-y-[265%]"
    >
      <div class="group-hover:-mx-4 group-hover:scale-150 group-hover:rotate-6">
        1
      </div>
      <div class="group-hover:-my-3 group-hover:scale-110 group-hover:rotate-6">
        2
      </div>
      <div class="group-hover:-group-hover:rotate-6 group-hover:scale-75">
        3
      </div>
      <div class="group-hover:-my-3 group-hover:scale-125 group-hover:rotate-6">
        4
      </div>
      <div class="group-hover:-group-hover:rotate-45 group-hover:scale-90">
        5
      </div>
      <div
        class="group-hover:-my-3 group-hover:scale-110 group-hover:rotate-45"
      >
        6
      </div>
      <div class="group-hover:scale-125">7</div>
      <div class="group-hover:-my-3 group-hover:scale-150 group-hover:rotate-3">
        8
      </div>
      <div class="group-hover:-group-hover:rotate-45">9</div>
      <div class="group-hover:-my-3 group-hover:scale-95 group-hover:rotate-12">
        10
      </div>
      <div class="group-hover:scale-50">11</div>
      <div class="group-hover:-my-2 group-hover:scale-150 group-hover:rotate-6">
        12
      </div>
      <div
        class="group-hover:-my-3 group-hover:scale-95 group-hover:rotate-180"
      >
        13
      </div>
      <div class="group-hover:-mx-2 group-hover:-my-px group-hover:rotate-6">
        14
      </div>
      <div class="group-hover:opacity-0">15</div>
      <div
        class="group-hover:-my-1 group-hover:scale-95 group-hover:-group-hover:rotate-12"
      >
        16
      </div>
      <div class="group-hover:scale-50 group-hover:-group-hover:rotate-12">
        17
      </div>
      <div class="group-hover:scale-75 group-hover:rotate-3">18</div>
      <div class="group-hover:scale-75 group-hover:-group-hover:rotate-12">
        19
      </div>
      <div class="">20</div>
      <div class="group-hover:opacity-0">21</div>
      <div class="group-hover:rotate-45 group-hover:-my-1">22</div>
      <div
        class="group-hover:-my-1 group-hover:scale-95 group-hover:-group-hover:rotate-12"
      >
        23
      </div>
      <div class="">24</div>
      <div class="group-hover:-mx-5 group-hover:scale-150 group-hover:rotate-6">
        25
      </div>
      <div
        class="group-hover:-mx-2 group-hover:-group-hover:rotate-12 group-hover:scale-[0.5]"
      >
        26
      </div>
      <div class="group-hover:rotate-45 group-hover:-my-1">27</div>
      <div class="group-hover:scale-50 group-hover:rotate-12">28</div>
      <div class="group-hover:scale-x-110 group-hover:rotate-12">29</div>
      <div class="group-hover:scale-75">30</div>
      <div class="">31</div>
      <div class="group-hover:opacity-0">32</div>
      <div class="group-hover:-group-hover:rotate-45">33</div>
      <div class="">34</div>
      <div class="group-hover:scale-50 group-hover:rotate-12">35</div>
      <div class="">36</div>
      <div class="group-hover:-mx-1 group-hover:scale-125 group-hover:rotate-6">
        37
      </div>
      <div
        class="group-hover:-mx-y group-hover:scale-110 group-hover:rotate-45"
      >
        38
      </div>
      <div class="group-hover:scale-50 group-hover:rotate-12">39</div>
      <div class="group-hover:-group-hover:rotate-45">40</div>
      <div class="group-hover:opacity-0">41</div>
      <div class="">42</div>
      <div class="group-hover:scale-75 group-hover:rotate-12">43</div>
      <div
        class="group-hover:-mx-y group-hover:scale-110 group-hover:-group-hover:rotate-45"
      >
        44
      </div>
      <div class="group-hover:scale-50">45</div>
      <div
        class="group-hover:-mx-y group-hover:scale-110 group-hover:rotate-45"
      >
        46
      </div>
      <div class="group-hover:mx-1 group-hover:scale-150 group-hover:rotate-6">
        47
      </div>
      <div class="group-hover:mx-1 group-hover:scale-125 group-hover:rotate-6">
        48
      </div>
    </div>

    <span
      class="relative z-10 p-2 opacity-0 group-hover:opacity-100 leading-none whitespace-no-wrap bg-gradient-to-t from-rose-500 to-rose-700 text-sm shadow-lg transition-all text-rose-300 group-hover:text-lg"
      >Hope You Like It 😉</span
    >
    <div
      class="w-3 h-3 -z-20 -mt-2 opacity-0 group-hover:opacity-100 rotate-45 bg-rose-500 transition-all"
    ></div>
  </div>
</div>