• 2 actions

    Nous pouvons donner une animation au survol et au clic, d'un même bouton (invisible, dans cet exemple).

    Première version: Changer l'image de fond ne permet pas de transition douce.

    Seconde version: avec transition douce par opacité, dans cet exemple (d'autres transitions possibles).

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; text-align: left;"><input id="chgt" type="text" /> <input id="chgtr" type="text" value="X" />
    <p id="decor">&nbsp;</p>
    </div>
    <style><!--
    #chgt{position:absolute; z-index:5; width:60vw; height:33.75vw; background:transparent;}
    #chgtr{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; background:rgba(255,255,255,0.5); font-size:1.5vw; color:red!important; text-align:center; line-height:2vw; transform:translate(56vw,1vw);}
    #decor{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/qls0CVvlwX12jM-hBDwE0pg-ORU@1152x648.jpg'); background-size:cover;}
    #chgt:hover ~ #decor{background:url('http://ekladata.com/po0aQBWgKHmv6cDC-LgpqNN3nQw@1152x648.jpg');}
    #chgt:focus ~ #decor{background:url('http://ekladata.com/6xlHz5GBl6otSmo1i86_qaHJMMQ@1152x648.jpg');}
    --></style>


     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; text-align: left;"><input id="chgtav" type="text" /> <input id="chgtrt" type="text" value="X" />
    <p id="decor1">&nbsp;</p>
    <p id="decor2">&nbsp;</p>
    <p id="decor3">&nbsp;</p>
    </div>
    <style><!--
    #chgtav{position:absolute; z-index:5; width:60vw; height:33.75vw; background:transparent;}
    #chgtrt{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; background:rgba(255,255,255,0.5); font-size:1.5vw; color:red!important; text-align:center; line-height:2vw; transform:translate(56vw,1vw);}
    #decor1{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/qls0CVvlwX12jM-hBDwE0pg-ORU@1152x648.jpg'); background-size:cover;}
    #decor2{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/po0aQBWgKHmv6cDC-LgpqNN3nQw@1152x648.jpg'); background-size:cover; opacity:0; transition:all 1s linear;}
    #decor3{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/6xlHz5GBl6otSmo1i86_qaHJMMQ@1152x648.jpg'); background-size:cover; opacity:0; transition:all 1s linear;}
    #chgtav:hover ~ #decor2{opacity:1;}
    #chgtav:focus ~ #decor3{opacity:1;}
    --></style>