[Résolu] Effet de zoom hover sur image en CSS

18008 sujets

Questions générales et questions de débutants

myself

13 Apr 2022 à 21:27

Bonsoir,

Je cherche à reproduire cet effet https://codepen.io/pen/?template=bGqRNBq mais avec un zoom qui se délimiterait à la taille initiale de l’image. Comme s’il y avait un cadre, par exemple.

Merci de votre aide. Je continue de chercher.

myself

13 Apr 2022 à 21:37

J’ai trouvé :
.field-content {
overflow: hidden;
width: 350px;
height: 215px;
}

Bongota

14 Apr 2022 à 09:18

Bonjour,

résolu, d'accord, mais ce petit ajout serait le bienvenu. J'ai toujours mal quand, sur un site, une image change brusquement d'état. Un peu de douceur dans les changements ne nuit pas, bien au contraire. On voit cet effet ralenti sur beaucoup de sites.

img{transition:0.8s;} 
img:hover{transform : scale(2);}

Là, tu vas cibler toutes les images de ton site, mais tu peux faire différemment.

Yordi

Modérateur

14 Apr 2022 à 16:03

Une autre idée serait d'utiliser pointer-events: none sur l'image et avoir le hover sur ton container.

img{
  transition: transform 0.8s;
  pointer-events: none;
}
.field-content img{transform : scale(2);}

Ca à l'avantage d'être plus flexible puisque tu ne dois pas définir width/height Smiley smile

Sujet clos