Background-position

Pour illustrer mon article du 27/1/16: "le chat de la voisine", qui présente un agrandissement du sujet principal d'une image, qui n'est pas centré dans celle-ci.

L'image est placée en fond de cadre: background:url(http://...); et, par défaut, elle conserve sa taille (1600x1200px) pour un cadre (ici 800x600px) et le point de référence de l'agrandissement est l'angle haut/gauche de cette image, soit: background-position:0% 0%;
Il faut donc réduire la taille de notre image de fond à la taille du cadre et choisir un point de référence qui convient.

Ce qui donne un code du genre:

<p id="v1">&nbsp;</p>

<style type="text/css"><!--

#v1{transition:all 1s linear; float:left; width:450px; height:600px; border:4px ridge brown;  background:url(http://ekladata.com/N-EOlfXFl8aSnys8GczhuoCHKJs/3651.jpg); background-size:100% 100%; background-position:50% 50%;}
#v1:hover{background-size:250% 250%;}
--></style>

Dans le cas d'un changement de taille (background-size) au survol, il faut indiquer une valeur de départ et une valeur au survol et ceci pour tout attribut modifié (background-position).
Un rappel: les deux valeurs en % correpondent à l'axe X (horizontal) et à l'axe vertical(Y); si vous n'indiquez qu'une valeur, cette valeur sera appliquée aux deux axes, ce qui vaut aussi sur border-radius, par exemple..

Ce qui signifie que l'adresse de votre image doit être celui d'une image assez grande pour être agrandie en restant nette, même si, au départ, elle est réduite en 800x600px, par exemple. 

Placer une image en fond de cadre est donc assez simple mais lorsque le sujet principal n'est pas centré, il faut pouvoir jouer sur le point de référence de l'agrandissement, par background-position.

Nous avons dit qu'au départ et, par défaut, le background-position:0% 0%; correspond à l'angle haut gauche de l'image; si notre sujet principal est au centre de notre image de fond, il faudra, qu'au survol, background-position passe de 0% 0%; à 50% 50%;

Si vous voulez faire des essais sur l'adresse d'une de vos images, je me suis amusé à faire ce petit montage, ci-dessous, où vous pouvez modifier le point de référence de l'agrandissement (x2).

Une précision pour être plus complet; je vous ai indiqué le positionnement en X% Y%, mais on peut donner d'autres valeurs aux paramètres horizontal et vertical.
Par exemple, écrire: background-position:left top; ce qui correspond à 0% 0%; cette notation ne permet pas de valeurs intermédiaires.
Par contre, une autre unité utilisable, assez souple, est la notation en pixel: background-position:100px 80px; mais elle a aussi un inconvénient, que l'on peut corriger.
Si votre image double de taille au survol, les valeurs en pixels restent les mêmes et il faut donc, au survol, tenir compte de la taille de l'image agrandie pour définir ces valeurs. (ce que j'ai fait sur "le chat de la voisine" !)

Ce petit montage pour vous exercer sur vos images.
J'ai dimensionné mes images en 1600x1200px pour qu'elle apparaissent en 800x600px et restent nettes à l'agrandissement de 200%.
Remplacez l'adresse de votre image par la vôtre, cliquez sur modifier l'image.
L'agrandissement au survol est réglé au départ par un point de référence au milieu de l'image: 50% 50%.
Le positionnement du fond: le premier % correspond à l'axe horizontal ce qui veut dire que 0% est à gauche et 100% est à droite.
Le second % correspond à l'axe vertical ce qui veut dire que 0% est en haut et 100% est en bas.
Choisissez vos valeurs et survolez le montage pour vérifier l'action de votre réglage.
Retour au départ par f5 clavier (chez moi, du moins !) ou sur la flèche "réactualiser/recharger" de la barre d'outils ou effacez les valeurs saisies et remplacez-les par de nouvelles.
...