JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div id="galerie">

            <!-- Slideshow HTML -->
            <div id="slideshow">
                <div id="slideContainer">
                    <div class="slide">
                    <img src="//placehold.it/243x311" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="//placehold.it/220x210" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>Diese</figcaption>
                    </div>
                       <div class="slide">
                        <img src="//placehold.it/243x311" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="//placehold.it/220x210" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>Kampagne</figcaption>
                    </div>
                    <div class="slide">
                    <img src="//placehold.it/243x311" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="//placehold.it/220x210" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>für</figcaption>
                    </div>
                </div>
            </div>
            <!-- Slideshow HTML -->  
   
        </div>

CSS

figcaption {
   position:absolute;
   background-color:aquamarine;
}
.slide:nth-child(1) figcaption {
   top:0;
   left:0;
}
.slide:nth-child(2) figcaption {
   top:0;
   right:0;
}
.slide:nth-child(3) figcaption {
   right:0;
   bottom:0;
}