• Effets divers

    Pas de montage ici mais des idées de présentation ou décoration, qu'il me sera difficile d'expliquer car souvent, cela dépend de la photo et de la position du ou des sujets.

    1 er exemple: une partie colorée au survol: survolez le café.

     

     


    <div style="width: 80vw; height: 45vw; margin: 1vh auto; border: 0.6vh ridge white;">
    <p id="vin1" class="vin">&nbsp;</p>
    <p id="vin2" class="vin">&nbsp;</p>
    </div>

    <style><!--
    .vin{background:url('http://ekladata.com/6Q5HnXvPqpKkA_ts9I-zZaRHAyY.jpg'); background-size:80vw 45vw;}
    #vin1{position:absolute; z-index:1; width:80vw; height:45vw; -webkit-filter:grayscale(1);filter:grayscale(1); opacity:0.7;}
    #vin2{position:absolute; z-index:2; width:20vw; height:24vw; background-position:-22vw -18vw; transform:translate(22vw,18vw); transition:all 0.5s linear; opacity:0;}
    #vin2:hover{opacity:1;}
    --></style>


    La même image sert pour les deux parties class="vin".

    - la première vin1, de la dimension du cadre,est placée en fond et avec filtre noir et blanc et opacité réduite.

    -la seconde vin2, placée au dessus (z-index:2;) ne reprend qu'une partie de l'image, selon sa position; vous remarquerez que si cette partie est positionnée en 22vw,18vw, la partie du fond qu'elle contient est -22vw -18vw; les mêmes valeurs mais en négatif ce qui rend l'écriture assez simple.

    Il faut, dans ce cas, indiquer à vos visiteurs de survoler telle ou telle partie de l'image.

    Nous pouvons également colorer plusieurs parties d'une image, au survol des zones ou au survol de boutons


    Survol

    A

    B

    C

    D

     

     

     

     

     


    Voici le principe de mon montage mais vous devrez l'adapter à votre image et aux sujets éclairés; vous pouvez sélectionner autant de parties que vous le souhaitez et donner la forme choisie à chacune.

    <div style="width: 80vw; height: 45vw; margin: 1vh auto; border: 0.6vh ridge white;">
    <p id="cde0">Survol</p>
    <p id="cde1" class="cde">A</p>
    <p id="cde2" class="cde">B</p>
    <p id="cde3" class="cde">C</p>
    <p id="cde4" class="cde">D</p>
    <p id="caf0" class="caf">&nbsp;</p>
    <p id="caf1" class="caf">&nbsp;</p>
    <p id="caf2" class="caf">&nbsp;</p>
    <p id="caf3" class="caf">&nbsp;</p>
    <p id="caf4" class="caf">&nbsp;</p>
    </div>
    <style><!--
    #cde0{position:absolute; z-index:5; width:10vw; text-align:center; font-size:1.5vw; color:coral; text-shadow:0.1vh 0.1vh black;transform:translate(72vw,2vw);}
    .cde{position:absolute; z-index:5; width:2vw; height:2vw; text-align:center; line-height:2vw; font-size:2vw; color:coral; text-shadow:0.1vh 0.1vh black;}
    #cde1{transform:translate(77vw,5vw);}
    #cde2{transform:translate(77vw,8vw);}
    #cde3{transform:translate(77vw,11vw);}
    #cde4{transform:translate(77vw,14vw);}
    .caf{background:url('http://ekladata.com/P-zus_XlWkMF5CXfriIQ-bQDAFs.jpg'); background-size:80vw 45vw;}
    #caf0{position:absolute; z-index:1; width:80vw; height:45vw; -webkit-filter:grayscale(1);filter:grayscale(1); opacity:0.7;}
    #caf1{position:absolute; z-index:2; width:5vw; height:6vw; border-radius:50%; background-position:-10vw -14vw; transform:translate(10vw,14vw); opacity:0;}
    #caf2{position:absolute; z-index:2; width:20vw; height:24vw; background-position:-24vw -20vw; transform:translate(24vw,20vw); opacity:0;}
    #caf3{position:absolute; z-index:1; width:8vw; height:8vw; background-position:-14vw -26vw; transform:translate(14vw,26vw); opacity:0;}
    #caf4{position:absolute; z-index:2; width:8vw; height:8vw; background-position:-40vw -29vw; transform:translate(40vw,29vw); opacity:0;}
    #cde1:hover ~ #caf1,#cde2:hover ~ #caf2,#cde3:hover ~ #caf3,#cde4:hover ~ #caf4{opacity:1;}
    --></style>