JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery">
    <ul>
        <!-- Das große Element -->
        <li>
            <a href="#1">#default</a>
        </li>
        
        <!-- Die kleinen Elemente -->
        <li id="li1">
            <a href="#li1">#1</a>
            <a href="#">Bild #1</a>
        </li>
        <li id="li2">
            <a href="#li2">#2</a>
            <a href="#">Bild #2</a>
        </li>
        <li id="li3">
            <a href="#li3">#3</a>
            <a href="#">Bild #3</a>
        </li>
        <li id="li4">
            <a href="#li4">#4</a>
            <a href="#">Bild #4</a>
        </li>
        <li id="li5">
            <a href="#li5">#5</a>
            <a href="#">Bild #5</a>
        </li>
    </ul>
</div>

CSS

#gallery ul {
    list-style: none ;
}

#gallery ul li,
#gallery ul li a {
    display: block ;
}

#gallery ul li:not(:first-child) {
    float: left ;
    border: 1px solid #FFF ;
}

#gallery ul li a {
    text-decoration: none ;
    color: #FFF ;
    background-color: lightblue ;
}

#gallery ul li a {
    opacity: 0.6 ;
}

#gallery ul li:not(:first-child) a:first-child {
    padding: 10px ;
}

#gallery ul li a:last-child {
    position: absolute ;
    top: 42px ;
    left: 1px ;
    width: 250px ;
    height: 250px ;
    text-align: center ;
    z-index: 1 ;
}

#gallery ul li:not(:first-child) a:last-child {
    display: none ;
}

#gallery ul li:not(:first-child):hover a,
#gallery ul li:not(:first-child):target a {
    display: block ;
    opacity: 1 ;
}

#gallery ul li:not(:first-child) a:first-child:hover + a {
    z-index: 2 ;
}