Erste, schlechteste Lösung:
Den .pic-wrapper für Mausklicks durchlässig machen durch pointer-events: none;
Zweite Lösung, auch nicht so gut:
Wie Du schon geschrieben hast, Höhe und Breite auf 350px ändern. Dann musst Du zusätzlich:
1. position: relative; für den umgebenden Container, d. h. div.slideshow setzen
2. top: 0; und right: 0; für .pic-wrapper setzen (oder einen gewissen Versatz, damit der Container nicht ganz an den Rändern klebt).
3. Den Versatz für die figure-Element der Slideshow heraus nehmen:
slideshow figure {
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 350px;
opacity: 0;
animation: slideShow 24s linear infinite 0s;
-o-animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s;
}
Alles anzeigen
Dritte und beste Lösung: Die Beschreibung links in einen Container packen, in einem weiteren Container den ersten mit der Beschreibung links und die Slideshow rechts mit Flexlayout anordnen:
<div class="beschreibung-slideshow">
<div class="beschreibung">
Jugendchampion
Midnightfires Shadow
Geburtstag: 19.04.2018
Geschlecht: männlich
Farbe: black white
Gewicht: 6,3 kg (08.06.2019)
Status: wohnt im Puschelreich
usw.
</div>
<div class="slideshow>
hier die weiteren Elemente der Slideshow
</div>
</div>
Alles anzeigen