Как реализовать данный блок на tailwind?

Question

[Дмитрий Путилов]

Как можно сделать вот такой вот блок, чтобы при наведении на него снизу выскакивало его продолжение и это продолжение как я понимаю имеет absolute, потому что оно идет поверх остальных блоков.

Вот как он выглядит до наведения на блок

А вот после

А вот как это смотрится целиком

Comments

[Дмитрий Кузнецов]

1. Тут вам не фриланс. Попробуйте сделать что-то, а потом уже просите совета что у вас в коде не так.
2. Предоставьте html код и стили, что бы другие пользователи могли повторить это. А лучше вообще на какую-нибудь онлайн площадку с визуальным отображением.

[Дмитрий Путилов]

Дмитрий Кузнецов, без проблем, вот мои начинания

import React from 'react';
import noPhoto from '../../images/noPhotoCard.png'
import styles from './CardProduct.module.css'

const CardProduct = () => {
    return (
        <div className={`w-full block hover:bg-white duration-300 px-3 py-2 h-[485px]`}>
            <a href="src/components/CardProduct/CardProduct">
                <div className={`relative`}>
                    <img className={`w-full`} src={noPhoto} alt=""/>
                    <div className={`rounded-2xl bg-yellow-400 inline-block px-4 py-1 absolute top-4 right-4 text-shadow-lg drop-shadow-lg`}>ХИТ</div>
                </div>

                <div className={`mt-2`}>
                    <div className={`texxt-xl`}>M19106 Водолазка д/дч фуксия</div>
                    <div className={`flex items-end text-xl`}>
                        <div className={`line-through text-ribbitos_gray`}>2 175</div>
                        <div className={`mx-4 font-bold`}>1 088</div>
                        <div>руб.</div>
                    </div>
                </div>
            </a>

            <div className={`mt-3 bg-white`}>
                <div className={`flex items-center`}>
                    <div className={`text-ribbitos_gray text-md`}>Размер</div>

                    <div className={`flex items-center`}>
                        <div className={`border border-ribbitos_gray px-2 mx-1 rounded-sm hover:border-ribbitos_brown cursor-pointer duration-300 text-sm`}>128</div>
                        <div className={`border border-ribbitos_gray px-2 mx-1 rounded-sm hover:border-ribbitos_brown cursor-pointer duration-300 text-sm`}>168</div>
                        <div className={`border border-ribbitos_gray px-2 mx-1 rounded-sm hover:border-ribbitos_brown cursor-pointer duration-300 text-sm`}>220</div>
                    </div>
                </div>

                <div className={`flex items-center mt-6 justify-center`}>
                    <button className={`text-md border border-ribbitos_brown rounded-md px-4 py-1 uppercase bg-ribbitos_brown text-white relative overflow-hidden hover:shadow-md hover:shadow-black duration-300 w-1/2 ${styles.cardButton}`}>
                        <div className={`opacity-0`}>В корзину</div>
                        <span className={`absolute top-1/2 text-center left-1/2 -translate-x-1/2 -translate-y-1/2 w-full duration-300 ${styles.basketText}`}>В корзину</span>
                        <span className={`absolute top-[150%] text-center left-1/2 -translate-x-1/2 -translate-y-1/2 duration-300 ${styles.basketIcon}`}>Купить</span>
                    </button>

                    <button className={`text-md border border-ribbitos_brown rounded-md px-4 py-1 uppercase ml-2 text-ribbitos_brown font-bold duration-300 hover:bg-ribbitos_brown hover:text-white hover:shadow-md hover:shadow-black w-1/2`}>В 1 клик</button>
                </div>
            </div>
        </div>
    );
};

export default CardProduct;

Вот css

.cardButton:hover > .basketText {
    top: -150%;
}

.cardButton:hover > .basketIcon {
    top: 50%;
}

Мне бы хотя бы идею

Answer 1

[Антон Романков]

Набросал пример: https://codepen.io/romant094/pen/LYgbybO