delay on hover for tailwind

Question

So, this is what my issue is. When someone hovers over a group, the new text shows up but it causes this feeling of dizzy because it auto formats during resize. What I want, if possible is to delay the text showing up until the resize is done. Is this possible and if so, what would I do? I need this to be 100% tailwind as I am challenging myself not to use any JS.

<div class="flex flex-row h-screen bg-white">
            <div class="group justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black xl:hover:w-3/4 w-full md:w-1/2 lg:w-1/3 xl:w-1/4" style="background-image:url('https://64.media.tumblr.com/68695898ecdfe0aec572b7c008def47f/1bbd6bfe09e82b49-4b/s1280x1920/27ddc6b47bd3b099920371ea489b6328965a868d.jpg'); background-size: cover; background-position:center;">
                <div class="justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-full shadow-2xl text-white text-center font-medium"  style="background-color: rgba(0,0,0,0.3);">
                    <div class="invisible md:visible font-logo opacity-80 justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-24 shadow-3xl text-white text-center font-medium group-hover:hidden">
                        profiles
                    </div>
                    <div class="font-logo hidden group-hover:flex justify-center content-between w-full h-full items-center text-white text-center font-medium p-2" style="background-color: rgba(0,0,0,0.6);">
                        Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.
                    </div>
                </div>
            </div>
            <div class="group hidden md:block justify-center flex items-center hover:grayscale min-h-full transition-width transform duration-500 bg-black xl:hover:w-3/4 md:w-1/2 lg:w-1/3 xl:w-1/4" style="background-image:url('https://64.media.tumblr.com/41d23310270e1250b764a69ca12333ac/43a07141e3d1c30f-3b/s1280x1920/e3205b18e17a1f2cab149ec457f27213b12a7438.jpg'); background-size: cover; background-position:center;">
                <div class="justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900  h-full text-white text-center font-medium" style="background-color: rgba(0,0,0,0.3);">
                    <div class="font-logo opacity-80 justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-24 shadow-3xl text-white text-center font-medium group-hover:hidden">
                        videochat
                    </div>
                    <div class="font-logo hidden group-hover:flex justify-center content-between w-full h-full items-center text-white text-center font-extralight p-2" style="background-color: rgba(0,0,0,0.6);">
                        Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.
                        <br><br>
                        Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.
                    </div>
                </div>
            </div>
            <div class="group hidden lg:block justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black xl:hover:w-3/4 w-1/4 lg:w-1/3 xl:w-1/4" style="background-image:url('https://64.media.tumblr.com/72b18c4efab196ca542512ca0bb38d06/ebad1b1c28cb53c1-2a/s1280x1920/4fb2d2ea23b1d49bc248d236ef9d408f657dfe36.jpg'); background-size: cover; background-position:center;">
                <div class="justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-full text-white text-center font-medium" style="background-color: rgba(0,0,0,0.3);">
                    <div class="font-logo opacity-80 justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-24 shadow-3xl text-white text-center font-medium group-hover:hidden">
                        photos & videos
                    </div>
                    <div class="font-logo hidden group-hover:flex justify-center content-between w-full h-full items-center text-white text-center font-medium p-2" style="background-color: rgba(0,0,0,0.6);">
                        Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.
                    </div>
                </div>
            </div>
            <div class="group hidden xl:block justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black xl:hover:w-3/4 w-1/4" style="background-image:url('https://64.media.tumblr.com/cb7c1c5c426ced74a2788bf33500b43a/f3c47dd9b7cd259b-60/s1280x1920/2590659bf867eedb7e4e2d2b8a33d3d9c3f77060.jpg'); background-size: cover; background-position:center;">
                <div class="justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-full text-white text-center font-medium" style="background-color: rgba(0,0,0,0.3);">
                    <div class="font-logo opacity-80 justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-24 shadow-3xl text-white text-center font-medium group-hover:hidden">
                        and more...
                    </div>
                    <div class="font-logo hidden group-hover:flex justify-center content-between w-full h-full items-center text-white text-center font-medium p-2" style="background-color: rgba(0,0,0,0.6);">
                        Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.
                    </div>
                </div>
            </div>
        </div>

Answer 1

You can create a div and set class: opacity-0 group-hover:hover:opacity-100 min-h-full transition duration-300 delay-500 flex items-center

like this:

   <div class="justify-center content-between min-h-full w-full flex items-center text-3xl uppercase bg-gray-900 h-full text-white text-center font-medium" style="background-color: rgba(0,0,0,0.3);">
                    <div class="font-logo opacity-80 justify-center content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-24 shadow-3xl text-white text-center font-medium group-hover:hidden">
                        photos & videos
                    </div>
                    <div class="font-logo hidden group-hover:flex justify-center content-between w-full h-full items-center text-white text-center font-medium p-2" style="background-color: rgba(0,0,0,0.6);">
                      <div class="opacity-0 group-hover:hover:opacity-100 min-h-full transition duration-300 delay-500 flex items-center">Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.</div>
                    </div>
                </div>