How do you center a text element horizontally and vertically within its above sibling element correctly?

Austin S 0
Viewed 54

I am trying to build this mosaic gallery where when you hover over one of the mosaic gallery items the before pseudo-element slides up adding a linear gradient to the item and some text. The way I have it working now does work but I had to add a transition translate-y of -800% to get the sibling text to appear relatively centered and it works for the biggest tile in the grid but I am looking for a solution that will work for all tiles in the grid regardless of size. Below I added the code (which is using TailwindCSS) for the grid I am building and a screenshot of how it looks.

<div className='grid grid-cols-5 gap-4'>
            <div className='group col-span-3 row-span-2 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-[100%] before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba ease-in-out hover:before:translate-y-[-100%] hover:before:duration-300'>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/618ccff33755f5e37b715a20_client%20website%20design.png'
                    alt='Project Image'
                />
                <h2 className='absolute text-white-text z-10 left-1/2 top-full group-hover:translate-y-[-800%] duration-300'>
                    Project Name
                </h2>
            </div>
            <div className='col-span-1 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-[100%] before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition before:ease-in-out before:hover:-translate-y-[100%] before:duration-300'>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/60b5977c662a245446454924_Box%203%20(37)-p-500.png'
                    alt='Project Image'
                />
                <h2 className='absolute text-white-text z-10 left-1/2 top-full group-hover:translate-y-[-800%] duration-300'>
                    Project Name
                </h2>
            </div>
            <div className='col-span-1 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-[100%] before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition before:ease-in-out before:hover:-translate-y-[100%] before:duration-300'>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/6093c0fef7f40b7d6ebf9645_Box%201%20(17)-p-1080.png'
                    alt='Project Image'
                />
                <h2 className='absolute text-white-text z-10 left-1/2 top-full group-hover:translate-y-[-800%] duration-300'>
                    Project Name
                </h2>
            </div>
            <div className='col-span-1 relative overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-[100%] before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition before:ease-in-out before:hover:-translate-y-[100%] before:duration-300'>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/604ef840b64f647c62914dbf_Box%201%20(4)-p-1080.png'
                    alt='Project Image'
                />
                <h2 className='absolute text-white-text z-10 left-1/2 top-full group-hover:translate-y-[-800%] duration-300'>
                    Project Name
                </h2>
            </div>
            <div className='col-span-1 relative inline-block overflow-hidden rounded-[10px] before:absolute before:left-0 before:top-[100%] before:w-full before:h-full before:bg-gradient-to-bl before:from-dark-green-text-rgba before:to-fern-green-rgba before:transition before:ease-in-out before:hover:-translate-y-[100%] before:duration-300'>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/60534f6a7a751b11a512c9a2_Box%201%20(36)-p-1080.png'
                    alt='Project Image'
                />
                <h2 className='absolute text-white-text z-10 left-1/2 top-full group-hover:translate-y-[-50%] duration-300'>
                    Project Name
                </h2>
            </div>
        </div>

enter image description here

tailwind-css reactjs javascript css html
1 Answers

I ended up finding a simpler solution by using an element specifically for the overlay element instead of trying to use the before pseudo-element and translating it on top of the parent element. By doing it this way I was also able to contain the inner text for the overlay within the outer overlay element and move them together more seamlessly.

<div className='grid grid-cols-5 gap-4'>
            <div className='group col-span-3 row-span-2 relative overflow-hidden rounded-[10px]'>
                <div className='absolute w-full h-full bg-gradient-to-bl from-dark-green-text-rgba to-fern-green-rgba transition-all duration-300 ease-in-out translate-y-full group-hover:translate-y-0'>
                    <div className='flex justify-center items-center h-full'>
                        <h2 className='text-white-text none'>Project Name</h2>
                    </div>
                </div>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/618ccff33755f5e37b715a20_client%20website%20design.png'
                    alt='Project Image'
                />
            </div>

            <div className='group col-span-1 relative overflow-hidden rounded-[10px]'>
                <div className='absolute w-full h-full bg-gradient-to-bl from-dark-green-text-rgba to-fern-green-rgba transition-all duration-300 ease-in-out translate-y-full group-hover:translate-y-0'>
                    <div className='flex justify-center items-center h-full'>
                        <h2 className='text-white-text none'>Project Name</h2>
                    </div>
                </div>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/60b5977c662a245446454924_Box%203%20(37)-p-500.png'
                    alt='Project Image'
                />
            </div>

            <div className='group col-span-1 relative overflow-hidden rounded-[10px]'>
                <div className='absolute w-full h-full bg-gradient-to-bl from-dark-green-text-rgba to-fern-green-rgba transition-all duration-300 ease-in-out translate-y-full group-hover:translate-y-0'>
                    <div className='flex justify-center items-center h-full'>
                        <h2 className='text-white-text none'>Project Name</h2>
                    </div>
                </div>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/6093c0fef7f40b7d6ebf9645_Box%201%20(17)-p-1080.png'
                    alt='Project Image'
                />
            </div>

            <div className='group col-span-1 relative overflow-hidden rounded-[10px]'>
                <div className='absolute w-full h-full bg-gradient-to-bl from-dark-green-text-rgba to-fern-green-rgba transition-all duration-300 ease-in-out translate-y-full group-hover:translate-y-0'>
                    <div className='flex justify-center items-center h-full'>
                        <h2 className='text-white-text none'>Project Name</h2>
                    </div>
                </div>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/604ef840b64f647c62914dbf_Box%201%20(4)-p-1080.png'
                    alt='Project Image'
                />
            </div>
            <div className='group col-span-1 relative inline-block overflow-hidden rounded-[10px]'>
                <div className='absolute w-full h-full bg-gradient-to-bl from-dark-green-text-rgba to-fern-green-rgba transition-all duration-300 ease-in-out translate-y-full group-hover:translate-y-0'>
                    <div className='flex justify-center items-center h-full'>
                        <h2 className='text-white-text none'>Project Name</h2>
                    </div>
                </div>
                <img
                    className='w-full h-full cover'
                    src='https://uploads-ssl.webflow.com/600b6ab92506fd10a1ca3f8a/60534f6a7a751b11a512c9a2_Box%201%20(36)-p-1080.png'
                    alt='Project Image'
                />
            </div>
        </div>
Austin S0
Related