5 Bilder Reihe "Raw"

[m413Wies]

Hey Liebe HTML Community!

Ich hab ein Problem,
da ich selbst keine Erfahrung im Scripting Bereich habe,
suche ich nach einer Hilfe die mir das Problem lösen kann..

Es geht um eine 5 Bilder Reihe "Raw"

nur aktuell behindert das eine das andere Bild deswegen würde ich ein bis zwei in den Hintergrund rücken lassen und andere in den Vordergrund bringen.

 

[Sempervivum]

Hallo und willkommen im Forum!

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

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:

    <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>

    <div class="no-container">
        <div class="keditable d-none"></div>
        <!-- Klasse "row-imgs" hinzu fügen, um diesen Container ansprechen zu können: -->
        <div class="row-imgs row g-0 my-5 py-5">
            <!-- Dieser Container soll in den Hintergrund, Klasse "back" hinzu fügen -->
            <div class="back d-none col d-md-flex align-items-center"
                style="transform:translateY(-1.5em) scale(1.4) rotate(2deg)">


                <div class="kimgRatio1"><img class="" alt="" title="" src="images/dia0.jpg"></div>


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


                <div class="kimgRatio1"><img class="kimgfilter3" alt="" title="" src="images/dia1.jpg"></div>


            </div>
            <!-- Dieser Container soll in den Vordergrund, Klasse "front" hinzu fügen -->
            <div class="front col d-flex align-items-center" style="transform:translateY(-2em) scale(1.3) rotate(3deg)">

                <div class="kimgRatio1"><img class="kimgfilter3" alt="" title="" src="images/dia2.jpg"></div>


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


                <div class="kimgRatio1"><img class="kimgfilter3" alt="" title="" src="images/dia3.jpg"></div>


            </div>
            <!-- Dieser Container soll in den Hintergrund, Klasse "back" hinzu fügen -->
            <div class="back d-none col d-md-flex align-items-center"
                style="transform:translateY(-1em) scale(1.3) rotate(5deg)">


                <div class="kimgRatio1"><img class="" alt="" title="" src="images/dia4.jpg"></div>


            </div>

        </div>


    </div>

Beachte meine Kommentare.