Le code de l"article:
<div style="border: 4px ridge green; width: 600px; margin: 5px 0px 10px 30px; padding: 5px; background-color: rgba(0, 128, 128, 0.7); text-align: center;">
    <span style="font-size: 10pt;"><strong><span style="background-color: #ccffcc;">Survolez les vignettes puis cliquez dessus.</span><br />
    Rassurez-vous, pas de code sur ce montage tr&egrave;s similaire, si ce ne sont les transformations un peu diff&eacute;rentes, pour tester le syst&egrave;me...Je suis n&eacute;anmoins &agrave; votre disposition pour toute
    explication.</strong></span>
  </div>
<div style="border: 8px ridge brown; width: 600px; margin: 5px 0px 10px 30px; background-color: rgba(128,0,0,0.5);">
    <img src="http://www.turbophoto.com/Free-Stock-Images/Images/Woods%20(2).JPG" id="machin" style="width: 600px;" name="machin" />
  </div>
<div style="margin: 10px 0px 0px 0px; padding: 15px; height: 150px; overflow: auto; white-space: nowrap;">
    <img class="truc" src="http://www.turbophoto.com/Free-Stock-Images/Images/Woods%20(2).JPG" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/Woods%20(2).JPG'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="bidule" src="http://www.turbophoto.com/Free-Stock-Images/Images/Green%20Lawn%20Park.jpg" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/Green%20Lawn%20Park.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="truc" src="http://www.turbophoto.com/Free-Stock-Images/Images/Beautiful%20Landscape.jpg" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/Beautiful%20Landscape.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="bidule" src="http://www.turbophoto.com/Free-Stock-Images/Images/Crater.JPG" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/Crater.JPG'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="truc" src="http://www.turbophoto.com/Free-Stock-Images/Images/Half%20Dome%20Yosemite%20National%20Park.jpg" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/Half%20Dome%20Yosemite%20National%20Park.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="bidule" src="http://www.turbophoto.com/Free-Stock-Images/Images/Landscapes.JPG" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/Landscapes.JPG'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="truc" src="http://www.turbophoto.com/Free-Stock-Images/Images/Snowy%20Mountain.jpg" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/Snowy%20Mountain.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="bidule" src="http://www.turbophoto.com/Free-Stock-Images/Images/australia.jpg" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/australia.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" /> <img class="truc" src="http://www.turbophoto.com/Free-Stock-Images/Images/mountain_wallpaper.jpg" onclick="machin.src='http://www.turbophoto.com/Free-Stock-Images/Images/mountain_wallpaper.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" />
  </div>
<style type="text/css"><!--
.truc {
   border: 4px ridge grey;
   opacity:0.7;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
}
.truc:hover {
   border:4px ridge red;
   box-shadow:1px 1px 8px;
   opacity:1;
   -webkit-transform: translate(10px, 10px) scale(1.2) rotate(15deg);
   -moz-transform: translate(10px, 10px) scale(1.2) rotate(15deg);
--></style>
<style type="text/css"><!--
.bidule {
   border: 4px ridge grey;
   opacity:0.7;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
}
.bidule:hover {
   border:4px ridge red;
   box-shadow:1px 1px 8px;
   opacity:1;
   -webkit-transform: translate(10px, 10px) scale(1.2) rotate(-15deg);
   -moz-transform: translate(10px, 10px) scale(1.2) rotate(-15deg);
--></style>