Transition images mosaiques

Bonjour à tous !

Je suis actuellement en stage, et ma mission est de créer un site web qui servira simplement de présenter l'entreprise en question.

Je suis en train de creer un bandeau avec plusieurs petites images à l'intérieur, comme une mosaique.
Et je souhaiterais que lorsqu'on arrive sur cette page d'accueil, que toutes ces petites images apparaissent avec un effet fondu etc..

Mon code HTML :

                            <img class="photo2" src="images/EnginsTP/TP1.jpg" alt="Cougar" width="130" />
                            <img class="photo2" src="images/EnginsTP/TP2.jpg" alt="Cougar"  width="130"/>
                            <img class="photo2" src="images/EnginsTP/TP3.jpg" alt="Cougar" width="130" />
                            <img class="photo2" src="images/EnginsTP/TP4.jpg" alt="Cougar"  width="130"/>
                            <img class="photo2" src="images/EnginsTP/TP5.jpg" alt="Cougar" width="130" />
                            <img class="photo2" src="images/EnginsTP/TP6.jpg" alt="Cougar" width="130" />
                            <img class="photo2" src="images/EnginsTP/TP7.jpg" alt="Cougar"  width="130"/>
                            <img class="photo2" src="images/EnginsTP/TP8.jpg" alt="Cougar" width="130" />
                            <img class="photo1" src="images/EnginsTP/TP9.jpg" alt="Cougar" width="130" />
                            <img class="photo1" src="images/EnginsTP/TP10.jpg" alt="Cougar" width="130" />
                            <img class="photo1" src="images/EnginsTP/TP11.jpg" alt="Cougar" width="130" />
                            <img class="photo1" src="images/EnginsTP/TP12.jpg" alt="Cougar"  width="130" height="100"/>
                            <img class="photo1" src="images/EnginsTP/TP13.jpg" alt="Cougar"  width="130"/>
                            <img class="photo1" src="images/EnginsTP/TP14.jpg" alt="Cougar"  width="130"/>
                            <img class="photo1" src="images/EnginsTP/TP15.jpg" alt="Cougar"  width="130"/>
                            <img class="photo1" src="images/EnginsTP/TP5.jpg" alt="Cougar" width="130" />

                </div>
        </div>  

Mon code CSS :

#content-slider2 {
height: 335px;
width: 100%;
border-radius: 10px;
}

#slider2 {
height: 200px;
margin: 10px auto;
overflow: visible;
position: relative;
width: 80%;
border-radius: 10px;
}

Merci pour votre aide

Bonjour,

Plutôt que d'utiliser des images, j'utiliserais des div en background-image, bien plus facile à controler.

Exemple d'un code que j'ai créé récemment : Mosaic

Merci d'avoir répondu.

Hm, d'accord, mais si je procède comme ça, est-ce que j'aurais toujours mes petites images à côter l'une de l'autre ?

Mieux encore : une seule image, diffractée en autant de divs que nécessaire... comme dans l'exemple.

Comme je suis débutante je ne comprends pas tellement ton code.. Est ce que tu pourrais me l'expliquer ?

Et bien, hormis le positionnement des div en flexbox, ce qui n'est pas obligatoire, l'image est placée grace à la technique des sprites css avec des background-position.

Hm, je viens de regarder tout ça, et ça m'a l'air bien trop compliqué pour moi ^^

Ce n'est pas grave. Vous pouvez toujours garder votre code de départ et ajouter un effet d'animation CSS : Utiliser les animations CSS