La transition d'échelle d'un hyperlien ne fonctionne pas

Question

Je voudrais faire une transition d'échelle de mon image contenue dans un hyperlien. Tout ceci est contenu dans un div. J'ai écrit quelque chose mais ça ne fonctionne pas. J'ai besoin que l'image soit un hyperlien car elle doit rediriger l'utilisateur vers une autre page.

Jsfiddle

#logoemailcol {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#logoemailcol:hover #logoem {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

<div id="logoemailcol">
  <a href="" id="logoem" target="_blank">
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
  </a>
</div>

Answer 1

Cela ne fonctionne pas comme prévu, car l'élément d'ancrage est inline par défaut et selon la spécification, l'élément doit être un élément de niveau bloc ou un élément de niveau ligne atomique afin qu'il soit "transformable" .

Par conséquent, vous devez modifier le display de l'élément à inline-block o block pour qu'il fonctionne comme prévu. Ce faisant, la valeur inline-block rend les éléments comme un élément atomique de niveau inline et donc les éléments deviennent "transformable" par définition.

Exemple actualisé

#logoemailcol {
  position: relative;
  cursor: pointer;
}
#logoemailcol:hover #logoem {
  transform: scale(1.15);
}
#logoem {
  display: inline-block;
  transition: all 0.5s;
}

<div id="logoemailcol">
  <a href="" id="logoem" target="_blank">
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
  </a>
</div>

Bien sûr, vous pourriez également appliquer la transformation à l'élément parent puisqu'il est block niveau, mais je ne fais que fournir une raison pour laquelle pourquoi cela ne fonctionnait pas pour l'élément d'ancrage.

Pour référence :

Module Transformations CSS Niveau 1 - Terminologie - Élément transformable

Un élément transformable est un élément appartenant à l'une de ces catégories :

• un élément dont la disposition est régie par le modèle de boîte CSS qui est soit un niveau des blocs o élément atomique de niveau inline ou dont propriété d'affichage correspond à table-row, table-row-group, table-header-group, table-footer-group, table-cell ou table-caption.
• un élément dans l'espace de noms SVG et non régi par le modèle de boîte CSS qui a les attributs transform, 'patternTransform' ou gradientTransform.

Answer 2

Vous voulez mettre à l'échelle et faire une transition de l'image.

#logoemailcol{
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#logoem img {
  transition: all 0.5s;  
}

#logoemailcol:hover #logoem img{
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

<div id="logoemailcol">
   <a href="" id="logoem" target="_blank"><img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"></a>
</div>