* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    position: relative;
    display: flex;
    gap: 40px;

    & .card {
        position: relative;
        width: 80px;
        height: 260px;
        background-color: #333;
        border-radius: 10px;
        overflow: hidden;
        transition: .5s;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
        display: flex;
        justify-content: center;
        align-items: center;

        & img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
            opacity: .25;
            transition: .5s;
        }

        & .content {
            position: absolute;
            top: 30%;
            display: flex;
            align-items: center;
            transform: rotate(270deg);
            width: 260px;
            height: 80px;
            padding: 0 20px;
            transition: .5s;

            & h2 {
                font-size: 1.1em;
                font-weight: 400;
                color: #fff;
                padding: 2px 5px;
                padding-left: 8px;
                text-transform: uppercase;
                letter-spacing: .25em;
                transition: .5s;
                border-radius: 4px;
            }
        }
    }

    & .card:hover {
        width: 260px;
    }

    & .card:hover img {
        opacity: 1; 
    }

    & .card:hover .content {
        top: 70%;
        transform: rotate(360deg);
    }

    & .card:hover .content h2 {
        color: #333;
        background-color: #fff;
        box-shadow: 0 15px 15px rgba(0, 0, 0, .1);
    }
}