Montage type Orange

Placer les différents éléments les uns sur les autres, en laissant, dans l'ordre: en premier plan, les boutons invisibles, positionnés au dessus des vignettes (z-index:4) , les vignettes, positionnées où vous le souhaitez (z-index:2), les images, l'image de fond noir et blanc et les images transparentes (z-index:1).

Au survol d'un bouton invisible, une image soit se colore, soit au dessus des vignettes (z-index:3); pourquoi une différence entre le changement de niveau (z-index) et l'opacité: il me semble (?) que le changement de niveau est brutal alors que la vitesse de passage de transparence à opacité est réglable en vitesse.

<div id="fd">
<p id="bt1">&nbsp;</p>
<p id="bt2">&nbsp;</p>
<p id="bt3">&nbsp;</p>
<p id="v1">&nbsp;</p>
<p id="v2">&nbsp;</p>
<p id="v3">&nbsp;</p>
<p id="im1">&nbsp;</p>
<p id="im2">&nbsp;</p>
<p id="im3">&nbsp;</p>
</div>
<style type="text/css"><!--
#fd{width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 6px black; margin:10px auto;}
#bt1{position:absolute; z-index:4; transform:translate(700px,20px); width:80px; height:60px;}
#bt2{position:absolute; z-index:4; transform:translate(700px,100px); width:80px; height:60px;}
#bt3{position:absolute; z-index:4; transform:translate(700px,180px); width:80px; height:60px;}
#v1{position:absolute; z-index:2; transform:translate(700px,20px); width:80px; height:60px; background:url(http://ekladata.com/lPB_NkDqmgOr3Cxihb_AylnLv5U/3640v.jpg);}
#v2{position:absolute; z-index:2; transform:translate(700px,100px); width:80px; height:60px; background:url(http://ekladata.com/v3rvoEtEjFD2qXltsMKvyjuPwhw/3641v.jpg);}
#v3{position:absolute; z-index:2; transform:translate(700px,180px); width:80px; height:60px; background:url(http://ekladata.com/bul3K4S8-u0jZhVlRDIpNt8GITQ/3642v.jpg);}
#im1{position:absolute; z-index:1; transition:all 1s linear; transform:translate(0px,0px); width:800px; height:600px; background:url(http://ekladata.com/W5hGFlD0hp8eW_lyVXZxuCOqs8I/3640.jpg); filter:grayscale(1); -webkit-filter:grayscale(1);}
#im2{position:absolute; z-index:1; transition:all 1s linear; transform:translate(0px,0px); width:800px; height:600px; background:url(http://ekladata.com/W9Z46YZH5aA2sF9Sc1hv_alDFMs/3641.jpg); opacity:0;}
#im3{position:absolute; z-index:1; transition:all 1s linear; transform:translate(0px,0px); width:800px; height:600px; background:url(http://ekladata.com/W1wg2zZ9dEo59ot3gtAkg6Ae-HI/3642.jpg); opacity:0;}
#bt1:hover ~ #im1{z-index:3; filter:grayscale(0); -webkit-filter:grayscale(0);}
#bt2:hover ~ #im2{z-index:3; opacity:1;}
#bt3:hover ~ #im3{z-index:3; opacity:1;}
--></style>
...
Mes images font 800x600px mais le montage est adaptable à toute dimension.
Pour alléger le montage, j'ai créé des adresses pour les vignettes de 80x60px mais vous pouvez utiliser l'adresse des images et en réduire la taille, si vous le souhaitez.