Explications
Nous allons, avant tout, créer, (par photofiltre, pour moi), deux images pour chaque photo: une vignette (ici 200x150) et une image plus grande en lien (ici 800x600)
Regardons le code de la première image; pour les autres, les codes seront similaires avec deux paramètres modifés.
<img class="pap1" src="http://ddata.over-blog.com/3/00/20/96/page-papillons/196.200.jpg" style="margin:0px 0px 0px 0px;">
<style type="text/css"><!--
.pap1 {
   opacity:0.5;
   -webkit-transition: -webkit-transform 0s linear , opacity 0s linear;
   -moz-transition: -moz-transform 0s linear , opacity 0s linear;
   -webkit-transform: rotate(0deg)  ;
   -moz-transform: rotate(0deg) ;
}
.pap1:hover{
  opacity:1;
  z-index:1;
--></style>
La première ligne est l'adresse de l'image en vignette, hébergée sur OB, avec un nom: "pap1" et un positionnement par margin.
Les lignes suivantes sont les paramètres CSS qui vont concerner cette image seulement (pap1).
Cette image étant la première, elle ne sera pas inclinée; par contre, comme pour toutes les autres, son opacité changera au survol (opacity passe de 0.5 à 1) et elle passera au premier plan par: z-index:1;
Le code la seconde sera:
<img class="pap2" src="http://ddata.over-blog.com/3/00/20/96/page-papillons/197.200.jpg" style="margin:20px 0px 0px -130px;">
<style type="text/css"><!--
.pap2 {
   opacity:0.5;
   -webkit-transition: -webkit-transform 0s linear , opacity 0s linear;
   -moz-transition: -moz-transform 0s linear , opacity 0s linear;
   -webkit-transform: rotate(5deg) translate(0px, 40px) ;
   -moz-transform: rotate(5deg) translate(0px, 40px);
}
.pap2:hover{
  opacity:1;
  z-index:1;
--></style>
Le nom de l'image change (pap2) et les paramètres CSS s'applique à cette image
Pour la positionner sur la première, nous modifions les valeurs de l'attribut "margin"; pour l'incliner, dans un sens ou un autre, nous modifions la valeur de rotate(xdeg).
Quant au lien au clic sur chaque vignette: il suffit d'utiliser le maillon de chaine de la fenêtre de création OB et, dans mon cas, de choisir l'onglet: "pop up".

Clic sur chaque vignette pour l'agrandir.
Chaque vignette passera au premier plan au survol.
Cet article figurera dans les codes html pour détailler le code de réalisation.