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 :
<div class="container2">
<div id="content-slider2">
<div id="slider2">

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

height: 335px;
width: 100%;
border-radius: 10px;

}

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

}

Merci pour votre aide :D