JSFiddle - React, Tailwind, and code Playground

HTML

<div id="album">

<ul class="gallery">

    <li><a href="#"><img class="smallquer" src="fotos\quer.jpg" alt="bild1"><img class="quer" src="fotos\quer.jpg" alt="bild1"></a></li>
    <li><a href="#"><img class="smallhoch" src="fotos\hoch.jpg" alt="bild2"><img class="hoch" src="fotos\hoch.jpg" alt="bild2"></a></li>
    <li><a href="#"><img class="smallquer" src="fotos\quer.jpg" alt="bild3"><img class="quer" src="fotos\quer.jpg" alt="bild3"></a></li>
    <li><a href="#"><img class="smallhoch" src="fotos\hoch.jpg" alt="bild4"><img class="hoch" src="fotos\hoch.jpg" alt="bild4"></a></li>
    <li><a href="#"><img class="smallquer" src="fotos\quer.jpg" alt="bild5"><img class="quer" src="fotos\quer.jpg" alt="bild5"></a></li>
    <li><a href="#"><img class="smallhoch" src="fotos\hoch.jpg" alt="bild6"><img class="hoch" src="fotos\hoch.jpg" alt="bild6"></a></li>
    <li><a href="#"><img class="smallquer" src="fotos\quer.jpg" alt="bild7"><img class="quer" src="fotos\quer.jpg" alt="bild7"></a></li>
    <li><a href="#"><img class="smallhoch" src="fotos\hoch.jpg" alt="bild8"><img class="hoch" src="fotos\hoch.jpg" alt="bild8"></a></li>
    <li><a href="#"><img class="smallquer" src="fotos\quer.jpg" alt="bild9"><img class="quer" src="fotos\quer.jpg" alt="bild9"></a></li>
    <li><a href="#"><img class="smallhoch" src="fotos\hoch.jpg" alt="bild10"><img class="hoch" src="fotos\hoch.jpg" alt="bild10"></a></li>
    <li><a href="#"><img class="smallquer" src="fotos\quer.jpg" alt="bild11"><img class="quer" src="fotos\quer.jpg" alt="bild11"></a></li>
    <li><a href="#"><img class="smallhoch" src="fotos\hoch.jpg" alt="bild12"><img class="hoch" src="fotos\hoch.jpg" alt="bild12"></a></li>
    <li><a href="#"><img class="smallquer" src="fotos\quer.jpg" alt="bild13"><img class="quer" src="fotos\quer.jpg" alt="bild13"></a></li>
    <li><a href="#"><img class="smallhoch" src="fotos\hoch.jpg" alt="bild14"><img class="hoch" src="fotos\hoch.jpg" alt="bild14"></a></li>
    <li><a href="#"><img...

CSS

#album {
width: 400px;
height: 550px;
background: #bbb url(titel.jpg) 0 40px no-repeat;
border: 1px solid #000;
margin: 20px auto;
}

/*--Formatierung der Linkleiste--*/
.gallery {
padding: 0px;
    padding-left: 4px;
margin: 430px 0 0 0;
list-style-type: none;
position: relative;
width: 400px;
}
/*--Horizontale Anordnung der Listeneinträge--*/
.gallery li {
float: left;
    
}

/*--Formatierung der Link-Buttons--*/
.gallery li a, .gallery li a:visited {
font-size: 11px;
display: block;
text-decoration: none;
color: #000;
background: #fff;
text-align: center;
width: 35px;
height: 35px;
line-height: 24px;
border-right: 2px solid #444;
    border-bottom: 2px solid #444;
margin: 1px;
}

/*--Hover-Formatierung der Link-Buttons--*/
.gallery li a:hover {
background: #ddd;
    border: 1px solid #fff;
}

/*active und focus-Formatierung der Link-Buttons*/
.gallery li a:active, .gallery li a:focus {
background: #888;
color: #fff;
    margin: 0px;
    border: 2px solid #ff0;
}

/*Blendet die Bilder aus*/
.gallery li a img {
visibility: hidden;
border: 0;
}

/*--Positionierung der Querformat-Bilder--*/
.gallery li a img.quer {
position: absolute;
top: -350px;
left: 0;
}

/*--Positionierung der Hochformat-Bilder*/
.gallery li a img.hoch {
position: absolute;
top: -430px;
left: 0;
border-left: 66px solid #bbb;
border-right: 66px solid #bbb;
}

/*--Einblenden der Bilder im active/focus-Zustand--*/
.gallery li a:active img, .gallery li a:focus img {
visibility: visible;
}

.gallery li img.smallhoch{
visibility: visible;
height: 35px;
    width: 35px;
}

.gallery li img.smallquer{
    visibility: visible;
    width: 35px;
    height: 35px;
}