Beautiful hover effect on list items

<section className="group/section">
  <div className="group-hover/section:text-zinc-400 dark:group-hover/section:text-[#656565]">
    {allSnippets.map((post) => (
      <Link
        key={post.slug}
        className="flex flex-col space-y-1 mb-4 group/item hover:text-black dark:hover:text-white  transition duration-[250ms] ease-out hover:duration-[50ms]"
        href={`/snippet/${post.slug}`}
      >
        <div className="w-full flex flex-col">
          <p className="overflow-hidden whitespace-nowrap overflow-ellipsis tracking-tight">
            {post.metadata.title}
          </p>
        </div>
      </Link>
    ))}
  </div>
</section>