Background-position

Nous pouvons sélectionner une zone particulière d'une image et la faire s'agrandir à partir de cette zone.

Dans les exemples suivant, je place l'image de fond en noir et blanc pour bien illustrer le positionnement de la zone sélectionnée.

Par défaut, la sélection de l'image va prendre la partie haut/gauche et la positionner en haut et à gauche:survol.

<div style="width:60vw; height:33.75vw; border:0.4vh solid white; margin:1vh auto;">
<p id="fd1">&nbsp;</p>
<p id="fd2">&nbsp;</p>
</div>
<style><!--
#fd1{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('https://ekladata.com/b0yNBmmyC9OrowfqgC1NMMV5pn8.jpg'); background-size:60vw 33.75vw; filter:grayscale(1);}
#fd2{position:absolute; z-index:1; width:16vw; height:9vw; background:url('https://ekladata.com/b0yNBmmyC9OrowfqgC1NMMV5pn8.jpg'); background-size:60vw 33.75vw; transition:all 1s linear;}

#fd2:hover{width:60vw; height:33.75vw;}
--></style>

Si nous déplaçons cette sélection, elle conserve la partie haut/gauche: survol.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh solid white; margin: 1vh auto;">
<p id="fd1a">&nbsp;</p>
<p id="fd2a">&nbsp;</p>
</div>

<style><!--
#fd1a{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('https://ekladata.com/b0yNBmmyC9OrowfqgC1NMMV5pn8.jpg'); background-size:60vw 33.75vw; filter:grayscale(1); opacity:0.5;}
#fd2a{position:absolute; z-index:1; width:16vw; height:9vw; background:url('https://ekladata.com/b0yNBmmyC9OrowfqgC1NMMV5pn8.jpg'); background-size:60vw 33.75vw; transform:translate(15vw,15vw);}
#fd2a:hover{width:60vw; height:33.75vw;transform:translate(0vw,0vw);}
--></style>

Nous modifions la taille et la position de la sélection.

Si nous voulons que la sélection se place à son positionnement d'origine et que l'agrandissement se fasse à partir de cette position, nous allons déterminer la position du sujet dans l'image complète et placer la sélection à ce même emplacement; mais, en plus, nous allons remplir la sélection de la partie d'imace contenant notre sujet.

Pour cela, le positionnement sera par transform:translate(Xvw,Yvw); et la partie du fond sera déterminée par les mêmes valeurs mais en négatif: exemple:

<div style="width: 60vw; height: 33.75vw; border: 0.4vh solid white; margin: 1vh auto;">
<p id="fd1b">&nbsp;</p>
<p id="fd2b">&nbsp;</p>
</div>
<style><!--
#fd1b{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('https://ekladata.com/b0yNBmmyC9OrowfqgC1NMMV5pn8.jpg'); background-size:60vw 33.75vw; filter:grayscale(1); opacity:0.5;}
#fd2b{position:absolute; z-index:1; width:20vw; height:16vw; background:url('https://ekladata.com/b0yNBmmyC9OrowfqgC1NMMV5pn8.jpg'); background-size:60vw 33.75vw; background-position:-16.5vw -14vw; transform:translate(16.5vw,14vw); transition:all 1s linear;}
#fd2b:hover{width:60vw; height:33.75vw;transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>

Comme dans l'exemple précédent, nous positionnons la sélection par transform:translate(16.5vw,14vw); mais, en plus, nous choisissons la partie de l'image correspondant à ce positionnement par background-position:-16.5vw 14vw;

Au survol, il faut préciser que le positionnement sera transform-translate(0vw,0vw); pour que l'image aille jusqu'au coin haut/gauche et aussi que le fond sera la totalité de l'image par background-position:0vw 0vw;

*****

Comme vous le voyez, une fois le positionnement déterminé, la partie du fond sélectionnée est facile à écrire.

La sélection peut être ronde ou ovale.