Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13690, member: 3917"]
Hallo und willkommen im Forum!

Mit z-index kannst Du Elemente in den Vordergrund oder Hintergrund verschieben:
[URL]https://www.w3schools.com/cssref/pr_pos_z-index.php[/URL]

Gib den betr. Elementen eine entspr. Klasse und weise das CSS zu.
Ich bin zwar nicht so der große Freund von Bootstrap aber ich habe es mal getestet:
[CODE=css]    <style>
        .row-imgs,
        .row-imgs>div {
            /* Damit ein z-index wirken kann, müssen wir die Elemente positionieren: */
            position: relative;
        }

div.front {
            /* Ein hoher z-index bringt das Element in den Vordergrund: */
            z-index: 1;
        }

div.back {
            /* Ein niedriger z-index bringt das Element in den Hintergrund: */
            z-index: -1;
        }
    </style>
[/CODE]
[CODE=html]    <div class="no-container">
        <div class="keditable d-none"></div>
        
        <div class="row-imgs row g-0 my-5 py-5">
            
            <div class="back d-none col d-md-flex align-items-center"
                style="transform:translateY(-1.5em) scale(1.4) rotate(2deg)">

</div>
            <div class="col d-flex align-items-center" style="transform:translateY(1em) scale(1.4) rotate(-5deg)">

</div>
            
            <div class="front col d-flex align-items-center" style="transform:translateY(-2em) scale(1.3) rotate(3deg)">

</div>
            <div class="col d-flex align-items-center" style="transform:translateY(1.5em) scale(1.3) rotate(-5deg)">

</div>
            
            <div class="back d-none col d-md-flex align-items-center"
                style="transform:translateY(-1em) scale(1.3) rotate(5deg)">

</div>

</div>
[/CODE]
Beachte meine Kommentare.
[/QUOTE]

Authentifizierung