'Tailwind CSS: hide one div and replace it with another

What I am trying to do is when someone hovers over an image/div, the middle title is hidden and replaced with some text I want to show. I have tried 100 ways to make this happen but it never fully works. Looking for a solution.

<div class="flex flex-row h-screen bg-white">
    <div class="justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black hover:w-3/4 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 opacity-70 h-24 text-white text-center font-medium">
                    profiles
            </div>
    </div>
    <div class="justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black hover:w-3/4 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 opacity-70 h-24 text-white text-center font-medium">
                    videochat
            </div>
    </div>
    <div class="justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black hover:w-3/4 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 opacity-70 h-24 text-white text-center font-medium">
                    photos & videos
            </div>
    </div>
    <div class="justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black 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 opacity-70 h-24 text-white text-center font-medium">
                    and more...
            </div>
    </div>
</div>
csstailwind-css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions