<div class="container">
        <div class="full-view"></div>
        <div class="preview-list">
            <ul>
                <li>
                    <input type="radio" id="tab-1" name="gallery-group">
                    <label for="tab-1">
                        <div class="tab">
                            <img
                                src="https://images.pexels.com/photos/1559117/pexels-photo-1559117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                    </label>
                    <div class="content">
                        <img
                            src="https://images.pexels.com/photos/1559117/pexels-photo-1559117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                    </div>
                </li>
                <li>
                    <input type="radio" id="tab-2" name="gallery-group">
                    <label for="tab-2">
                        <div class="tab">
                            <img
                                src="https://images.pexels.com/photos/688660/pexels-photo-688660.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                    </label>
                    <div class="content">
                        <img
                            src="https://images.pexels.com/photos/688660/pexels-photo-688660.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                    </div>
                </li>
                <li>
                    <input type="radio" id="tab-3" name="gallery-group">
                    <label for="tab-3">
                        <div class="tab">
                            <img
                                src="https://images.pexels.com/photos/730256/pexels-photo-730256.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                    </label>
                    <div class="content">
                        <img
                            src="https://images.pexels.com/photos/730256/pexels-photo-730256.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                    </div>
                </li>
                <li>
                    <input type="radio" id="tab-4" name="gallery-group" checked>
                    <label for="tab-4">
                        <div class="tab">
                            <img
                                src="https://images.pexels.com/photos/22427/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                    </label>
                    <div class="content">
                        <img src="https://images.pexels.com/photos/22427/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                    </div>
                </li>
                <li>
                    <input type="radio" id="tab-5" name="gallery-group">
                    <label for="tab-5">
                        <div class="tab">
                            <img
                                src="https://images.pexels.com/photos/789380/pexels-photo-789380.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                    </label>
                    <div class="content">
                            <img src="https://images.pexels.com/photos/789380/pexels-photo-789380.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                </li>
                <li>
                    <input type="radio" id="tab-6" name="gallery-group">
                    <label for="tab-6">
                        <div class="tab">
                            <img
                                src="https://images.pexels.com/photos/355411/pexels-photo-355411.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                        </div>
                    </label>
                    <div class="content">
                            <img src="https://images.pexels.com/photos/355411/pexels-photo-355411.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
                        </div>
                </li>
                <li>
                    <input type="radio" id="tab-7" name="gallery-group">
                    <label for="tab-7">
                        <div class="tab">
                            <img
                                src="https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                    </label>
                    <div class="content">
                            <img src="https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
                        </div>
                </li>
            </ul>
        </div>
    </div>

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    --line-offset: calc((10vh + 8px) / 2);
}

.container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 5fr 1fr;
    background: #021919;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    display: flex;
}

.tab {
    width: calc(10vh + 8px);
    height: calc(10vh + 8px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    shape-outside: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    z-index: 0;
    transition: width 0.5s;
}

.tab img {
    width: 10vh;
    height: 10vh;
    z-index: 10;
    cursor: pointer;
    clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    shape-outside: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    transition: width 0.5s;
}

[type=radio] {
    display: none;   
}

.preview-list {
    background: linear-gradient(
        #021919,
        #021919 var(--line-offset),
        #efefef var(--line-offset)
    );
}

.tab {
    background: linear-gradient(
        #efefef,
        #efefef var(--line-offset),
        #021919 var(--line-offset)
    );
}

[type=radio]:checked ~ label ~ .content{
    text-align: center;
    z-index: 8;
}


[type=radio]:checked ~ label .tab{
    width: 0;
}

.content {
    position: absolute;
    background: #021919;
    top: 1vh;
    left: 0;
    width: 100vw;
    height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.content img {
    height: auto;
    width: 100vw;  
}