• ArtB.5.4.21

    Un montage sur un blog d'une visiteuse (que je félicite) m'a rappelé un code simple, avec une deuxième version que je vous propose dans mes dimensions mais que vous saurez adapter à vos besoins.

    Première version: le survol de l'image en fait apparaître une seconde.

    Seconde version: le survol de l'image en fait apparaître une seconde et le clic maintenu en fait apparaître une troisième.

    Survol.

     

    <div style="width: 80vw; height: 45vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: url('http://ekladata.com/lwBotcA9SW7ope7SvbeLcC_KewY.jpg'); background-size: cover;">
    <p id="ver2">&nbsp;</p>
    <img id="ver1" src="http://ekladata.com/zjHe8LekQbnyO8-3RGVSKulnNY4.jpg" alt="" /></div>

    <style><!--
    #ver1{position:absolute; z-index:1; width:80vw; height:45vw; transform:translate(0vw,0vw) rotatey(0deg);transition:all 1s linear;}
    #ver2{position:absolute; z-index:5; width:80vw; height:45vw;}
    #ver2:hover ~ #ver1{transform:translate(0vw,0vw) rotatey(90deg);}
    --></style>

    Survol + Clic maintenu.

     

    <div style="width: 80vw; height: 45vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: url('http://ekladata.com/lwBotcA9SW7ope7SvbeLcC_KewY.jpg'); background-size: cover;">
    <p id="vert0">&nbsp;</p>
    <img id="vert1" src="http://ekladata.com/zjHe8LekQbnyO8-3RGVSKulnNY4.jpg" alt="" /> <img id="vert2" src="http://ekladata.com/qMx_gCEhVLtoy6eDCNL7iPobpMU.jpg" alt="" /></div>

    <style><!--
    #vert0{position:absolute; z-index:5; width:80vw; height:45vw;}
    #vert1{position:absolute; z-index:1; width:80vw; height:45vw; transform:translate(0vw,0vw) rotatey(90deg); transition:all 1s linear;}
    #vert2{position:absolute; z-index:1; width:80vw; height:45vw;transform:translate(0vw,0vw) rotatey(90deg); transition:all 1s linear;}
    #vert0:hover ~ #vert1{transform:translate(0vw,0vw) rotatey(0deg);}
    #vert0:active ~ #vert2{transform:translate(0vw,0vw) rotatey(0deg);}
    --></style>