tailwind hover menu animation

hovermenuanimation.html

<!--
Play with it: https://play.tailwindcss.com/sjRW48tX4h

  Credits: https://www.youtube.com/watch?v=NUeCNvYY_x4
-->

<div class="m-0 flex h-screen w-screen items-center bg-black">
  <div class="group peer relative z-20 ml-[20vw] ">
    <div class="cursor-pointer p-2 text-7xl text-white transition duration-300 ease-in-out group-hover:[&:not(:hover)]:opacity-20">Home</div>
    <div class="cursor-pointer p-2 text-7xl text-white transition duration-300 ease-in-out group-hover:[&:not(:hover)]:opacity-20">Features</div>
    <div class="cursor-pointer p-2 text-7xl text-white transition duration-300 ease-in-out group-hover:[&:not(:hover)]:opacity-20">Pricing</div>
    <div class="cursor-pointer p-2 text-7xl text-white transition duration-300 ease-in-out group-hover:[&:not(:hover)]:opacity-20 ">Team</div>
  </div>
  <div class="absolute left-0 top-0 z-0 h-full w-full bg-[url('https://picsum.photos/300/400')] bg-[size:110%] bg-[position:center_40%] opacity-20 duration-300 ease-in peer-hover:bg-[size:100%] peer-hover:opacity-10"></div>
  <!-- <div class="bg bg-[radial-gradient('rgba(255, 255, 255, 0.1) 9%, transparent 9%')] absolute"></div> -->
</div>