[Résolu] Le CSS en dynamique

J'ai un problème sur le fait de rendre mon site dynamique en CSS
voila ce que j'ai fais et son rendu :

HTML:

<figure><a href="http://192.168.0.4/cnfetp/"><img class="images image1" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/preparation_concours.jpg" alt="Formation disciplinaire" width="325" /></a><a href="http://192.168.0.4/cnfetp/"><img class="images image2" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/entree_metier.jpg" alt="" width="325" /></a><a href="http://192.168.0.4/cnfetp/"><img class="images image3" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/Formation_Transversales.jpg" alt="Formation Transversales" width="325" /></a><figcaption>                <strong>Entrée dans le metier</strong>                                 <strong>Formation Préparation concours </strong>                              <strong>Formation Par disciplines</strong></figcaption></figure><figure><a href="http://192.168.0.4/cnfetp/"><img class="images image1" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/Reformes.jpg" alt="" width="325" /></a><a href="http://192.168.0.4/cnfetp/"><img class="images image2" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/Enseignant_et_eleves_ados.jpg" alt="" width="325" /></a><a href="http://192.168.0.4/cnfetp/"><img class="images image3" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/Prevention_secourisme.jpg" alt="Formation Transversales" width="325" /></a><figcaption><strong>                           Réformes                                                                Formation Relation Pédagogique                       Formation Prévention, Secourisme</strong></figcaption></figure><figure><a href="http://192.168.0.4/cnfetp/"><img class="images image1" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/Informatique_Numerique.jpg" alt="Formation disciplinaire" width="325" /></a><a href="http://192.168.0.4/cnfetp/"><img class="images image2" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/Ouverture_Partenariat.jpg" alt="Préparation au concours" width="325" /></a><a href="http://192.168.0.4/cnfetp/"><img class="images image3" src="http://192.168.0.4/CNFETP/wp-content/uploads/2016/Personel_non_enseigant.jpg" alt="Formation Transversales" width="325" /></a><figcaption><strong>               Formation disciplinaire                                        Préparation au concours                                         Formation Transversales</strong></figcaption></figure>

CSS :

figcaption {
   margin-top: -25px;
}

.images{
	width: 250px;
	height: 150px;
	margin: 50px 0 30px;
	border-radius: 40px;
  border: 2px black solid;
}
.image1{
	box-shadow: 4px -4px 10px #DEDEDE;
	margin: 50px 0 0px 0;
}

.image2{
  margin: 50px 10px 0px 50px;

}

.image3{
	margin: 50px 10px 0px 40px;
}




#texte1{
    color: #51369b !important;
		margin-left: 65px;
		margin-top: -25px
}
#texte2{
    color: #51369b !important;
		margin-left: 400px;
		margin-top: -25px
}
#texte4{
    color: #51369b !important;
		margin-left: 430px;
		margin-top: -25px
}

Rendu :

http://hpics.li/21f0a84



Masi évidement c'est pas responsive ^^ donc comment je peux faire ??

Mmmm... il y a du travail.

Il vous faut étudier les médias queries et les combiner avec des display flex ou table.

Un exemple : Images

Merci de ta réponse c'est effectivement mieux comme tu présente mais j'ai finalement opté pour intégré le texte aux image
donc [résolu]