Augmenter la taille des images au hover

Augmenter la taille des images au hover

Transform:scale()

Voici deux techniques simple pour augmenter la taille des ses images au hover. On part d’un exemple simple, nous avons ici une image :

<img class="full" src="image.png" alt="" title="">

On lui attribue une classe « full » , que l’on va animer au hover grâce à la propriété transform:scale().

.full:hover{   -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Jouer sur la width de l’image

Une autre astuce consiste à attribuer une width à notre image avec un effet de transition:

.full{ width: 250px;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

Au hover, on lui attribue une width plus importante : en pixel, simplement:

.full:hover{  width:
350px;  }

Voici le rendu sur une image prise au hasard sur le net

See the Pen bNNPXz by yuyazz (@yuyazz) on CodePen.