• Exemple 135

    Un filtre de the Gimp ayant donné un bel effet, je reviens sur des filtres CSS, simples à utiliser: Survol de chaque bouton.

    A

    B

    C

    D

    E

     

     

    Pour cet exemple, j'ai placé, en dessous, l'image d'origine dans un paragraphe (#filt1) et, par dessus, une partie de la même image (filt2), à qui j'attribue différents filtres au survol de chaque bouton.

    La position de cette partie d'image est à positionner selon votre image de fond; vous pouvez aussi placer d'autres parties de l'image de fond, à faire apparaître en décalé, par exemple.

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border:0.1vh solid black;">
    <p id="bton1" class="bton" title="hue-rotate(90deg)">A</p>
    <p id="bton2" class="bton" title="hue-rotate(180deg)">B</p>
    <p id="bton3" class="bton" title="hue-rotate(240deg)">C</p>
    <p id="bton4" class="bton" title="filter:invert(1)">D</p>
    <p id="bton5" class="bton" title="filtre:sepia(1)">E</p>
    <p id="filt1">&nbsp;</p>
    <p id="filt2">&nbsp;</p>
    </div>
    <style><!--
    .bton{position:absolute; z-index:10; width:2vw; height:2vw; border:0.1vh solid black; border-radius:50%; text-align:center; line-height:2vw; background:aqua; font-size:2vw; color:coral; text-shadow:0.1vh 0.1vh black;}
    #bton1{transform:translate(55vw,2vw);}
    #bton2{transform:translate(55vw,6vw);}
    #bton3{transform:translate(55vw,10vw);}
    #bton4{transform:translate(55vw,14vw);}
    #bton5{transform:translate(55vw,18vw);}
    #filt1{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/RO3T8ie1c-b_l8w23C1a0hJjs5E.jpg'); filter: grayscale(1); opacity:0.5;}
    #filt2{position:absolute; z-index:1; width:40vw; height:20vw; border-radius:50%; transform:translate(10vw,8vw); background:url('http://ekladata.com/RO3T8ie1c-b_l8w23C1a0hJjs5E.jpg'); background-position:-10vw -8vw; filter:hue-rotate(0deg);}
    #bton1:hover ~ #filt2{filter:hue-rotate(90deg);}
    #bton2:hover ~ #filt2{filter:hue-rotate(180deg);}
    #bton3:hover ~ #filt2{filter:hue-rotate(240deg);}
    #bton4:hover ~ #filt2{filter:invert(1);}
    #bton5:hover ~ #filt2{filter:sepia(1);}
    --></style>