<div class="wrapper">
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=jr-korpa-9XngoIpxcEo-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Lorem ipsum dolor sit.</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1510906594845-bc082582c8cc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=aron-visuals-bZZp1PmHI0E-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Tempore distinctio debitis perspiciatis!</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1519751138087-5bf79df62d5b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=sharon-mccutcheon-62vi3TG5EDg-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Numquam ipsam esse incidunt?</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=jj-ying-7JX0-bfiuxQ-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Voluptatum, adipisci rerum! Deleniti.</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1524169358666-79f22534bc6e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=ash-edmonds-0aWZdK8nK2I-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Facere corporis numquam libero?</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1537237858032-3ad1b513cbcc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=jj-ying-azCTGObXR14-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Distinctio voluptatibus esse magni.</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1462556791646-c201b8241a94?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=hector-j-rivas-1FxMET2U5dU-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Sint quod doloribus facilis?</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1556139930-c23fa4a4f934?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=pawel-czerwinski-tMbQpdguDVQ-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Vero animi dolor voluptate.</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1622737133809-d95047b9e673?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=sebastian-svenson-d2w-_1LJioQ-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Quia dolor quibusdam nostrum!</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1618004912476-29818d81ae2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=milad-fakurian-CN2FEPXERRI-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Eius incidunt nam nulla?</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1599496507927-9056debd0f0a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=peter-olexa-RYtiT3b7XW4-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Illum necessitatibus dolores dicta.</p>
    </div>
    <div class="item">
        <img class="item__image" src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=li-zhang-K-DwbsTXliY-unsplash.jpg&w=640" alt="" />
        <p class="item__text">Harum possimus eveniet cupiditate.</p>
    </div>
</div>
<div class="overlay">
    <div class="overlay__wrapper">
        <div class="overlay__header">
            <p class="overlay__title">Overlay Title</p>
            <button class="overlay__button">Close</button>
        </div>
        <img class="overlay__image" src="" alt="" />
        <div class="overlay__content">
            <p class="overlay__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio libero maxime ipsa at! Similique itaque laboriosam consequuntur officiis distinctio unde perspiciatis, sit consequatur magni esse voluptas quasi fugiat! Perferendis, eum.</p>
            <p class="overlay__text">Molestias fugit nostrum dignissimos officia quas ut, unde, qui eaque consequatur laborum esse voluptates? Debitis eum dolorem eius maiores, minus, exercitationem maxime quisquam incidunt veritatis unde quibusdam ab reiciendis reprehenderit?</p>
            <p class="overlay__text">Obcaecati assumenda architecto debitis quam voluptates beatae odio quasi reiciendis? Minima, debitis aliquam laudantium, ullam temporibus non ab voluptatibus eaque tempore aperiam doloremque dolore voluptatem perspiciatis possimus, rem rerum quaerat?</p>
        </div>
    </div>
</div>

body {
    margin: 0;
    font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.wrapper {
    gap: 32px;
    padding: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.overlay {
    --duration: 0.2s;
    --translate: calc(100% + 32px);
    --backdrop-opacity: 0;
    --backdrop-delay: var(--duration);
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: end;
    backdrop-filter: blur(0px);
    visibility: hidden;
    transition: backdrop-filter var(--duration) ease-in-out, visibility 0s ease-in-out calc(var(--backdrop-delay) * 2);
    transform: translate3D(0, 0, 0);
    z-index: 100;
    
    &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.05);
        opacity: var(--backdrop-opacity);
        transition: var(--duration) opacity ease-in-out var(--backdrop-delay);
        content: '';
    }
    
    &--open {
        --translate: 0%;
        --backdrop-opacity: 1;
        --backdrop-delay: 0s;
        
        backdrop-filter: blur(5px);
        visibility: visible;
    }
    
    &__wrapper {
        width: 480px;
        transform: translateX(var(--translate));
        background-color: #ffffff;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2),
                    0 0 8px rgba(0, 0, 0, 0.15),
                    0 0 16px rgba(0, 0, 0, 0.1),
                    0 0 32px rgba(0, 0, 0, 0.05);
        transition: transform var(--duration) ease-in-out;
        overflow-y: auto;
    }
    
    &__header {
        gap: 16px;
        padding: 32px;
        display: grid;
        grid-template-columns: 1fr max-content;
        justify-content: space-between;
        align-items: center;
    }
    
    &__content {
        padding: 8px 32px;
    }
    
    &__title {
        margin: 0;
        font-size: 2rem;
    }
    
    &__image {
        width: 100%;
        height: 240px;
        object-fit: cover;
        background-color: #cccccc;
    }
    
    &__text {
        margin: 24px 0;
    }
    
    &__button {
        padding: 8px 16px;
        border-radius: 8px;
        border: 2px solid #cccccc;
        font-size: inherit;
        font-family: inherit;
        background-color: transparent;
    }
}

.item {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1),
                0 4px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
    
    &:hover {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2),
                    0 4px 4px rgba(0, 0, 0, 0.1),    
                    0 8px 8px rgba(0, 0, 0, 0.15),    
                    0 16px 16px rgba(0, 0, 0, 0.05);    
    }

    &__image {
        width: 100%;
        height: 128px;
        object-fit: cover;
        display: block;
        background-color: #cccccc;
    }
    
    &__text {
        margin: 0;
        padding: 8px 16px;
    }
}

const overlay = document.querySelector('.overlay');
const overlayTitle = overlay.querySelector('.overlay__title');
const overlayImage = overlay.querySelector('.overlay__image');
const overlayButton = overlay.querySelector('.overlay__button');
const items = document.querySelectorAll('.item');

const openOverlay = (item) => {
    const itemText = item.querySelector('.item__text');
    const itemImage = item.querySelector('.item__image');
    
    overlayTitle.textContent = itemText.textContent;
    overlayImage.src = itemImage.src;
    
    overlay.classList.add('overlay--open');
    document.body.style.setProperty('padding-right', `${window.innerWidth - document.body.scrollWidth}px`);
    document.body.style.setProperty('overflow', 'hidden');
};

const closeOverlay = () => {
    overlay.classList.remove('overlay--open');
    document.body.style.removeProperty('padding-right');
    document.body.style.removeProperty('overflow');
};

items.forEach((item) => {
    item.addEventListener('click', () => openOverlay(item));
});

overlay.addEventListener('click', (event) => {
    if (!event.target.closest('.overlay__wrapper')) {
        closeOverlay();
    }
});

overlayButton.addEventListener('click', (event) => {
    event.preventDefault();
    
    closeOverlay();
});