Avec filtre

Amusement avec quelques filtres sur images.
Le code de démonstration pour: 3 images verticales 16/9 en 380x675px et 6 images horizontales 16/9 en 1200x675px.

<div style="width:1200px; height:675px; margin:50px 0 50px -20px; border:6px ridge grey;">

<p id="sv">SURVOL</p>

<img id="prh1" class="prh" src="https://i.goopics.net/pajl7l.jpg">

<img id="prh2" class="prh" src="https://i.goopics.net/qlff98.jpg">

<img id="prh3" class="prh" src="https://i.goopics.net/2gyqxu.jpg">

<img id="prh4" class="prh" src="https://i.goopics.net/w7dpo4.jpg">

<img id="prh5" class="prh" src="https://i.goopics.net/yx4qc0.jpg">

<img id="prh6" class="prh" src="https://i.goopics.net/r20i47.jpg">

<img id="prv1" class="prv" src="https://i.goopics.net/gx3bit.jpg">

<img id="prv2" class="prv" src="https://i.goopics.net/pmc8p3.jpg">

<img id="prv3" class="prv" src="https://i.goopics.net/5s4b2m.jpg">

</div>

<style><!--

#sv{position:absolute; z-index:1; width:150px; font-size:35px; transform:translate(300px,200px);}

.prh{position:absolute; z-index:1; box-sizing:border-box; width:320px; height:180px; border:4px solid white; transition:all 1s;}

#prh1{transform:translate(0px,0px); filter:grayscale(1);}

#prh2{transform:translate(440px,0px); filter:saturate(500%);}

#prh3{transform:translate(880px,0px); filter:sepia(1);}

#prh4{transform:translate(0px,495px); filter:hue-rotate(180deg);}

#prh5{transform:translate(440px,495px); filter:invert(1);}

#prh6{transform:translate(880px,495px); filter:opacity(50%);}

#prh1:hover,#prh2:hover,#prh3:hover,#prh4:hover,#prh5:hover,#prh6:hover{z-index:5; width:1200px; height:675px; transform:translate(0px,0px); filter:none;}

.prv{position:absolute; z-index:1; box-sizing:border-box; width:225px; height:400px; border:4px solid white; transition:all 1s;}

#prv1{transform:translate(50px,135px); filter:brightness(50%);}

#prv2{transform:translate(485px,135px); filter:brightness(50%);}

#prv3{transform:translate(975px,135px); filter:brightness(50%);}

#prv1:hover{z-index:5; width:380px; height:675px; transform:translate(0px,0px); filter:none;}

#prv2:hover{z-index:5; width:380px; height:675px; transform:translate(410px,0px); filter:none;}

#prv3:hover{z-index:5; width:380px; height:675px; transform:translate(820px,0px); filter:none;}

--></style>

Un rappel sur les filtres:

filter:grayscale(1); ou filter:grayscale(100%);  noir et blanc

filter: blur(5px);  flou

filter:saturate(500%); saturation des couleurs

filter: sepia(1); aspect vieille photo

filter: hue-rotate(180deg); rotation des couleurs

filter: invert(1);  inversion des couleurs

filter: brightness(50%);  luminosité

filter:contrast(1);  contraste

filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); ombre sur les bords du sujet détouré et non sur le cadre.

 

SURVOL