Arrêter les éléments du tableau de changer de position lorsque survolés ?

Question

Alors j'ai une table avec deux rangées. Une pour les images, une pour un paragraphe en dessous. Les images sont des liens vers des pages web différentes, et j'ai une animation où la bordure grandit et change de couleur mais je ne veux pas que l'image change de position quand on survole. Y a-t-il un moyen d'empêcher l'image de le faire?

.project-table img {
  border: 6px solid white;
  width: 300px;
  transition: all 0.5s ease;
}

.project-table img:hover {
  border: 12px solid #FF1D58;
}

td {
  padding: 0px 180px 0 0;
  width: 110px;
  text-align: center;
}

      Bonjour ? Ceci est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur de cet élément. Si nous maintenons les paragraphes à la même longueur, nous n'aurons pas cette différence de hauteur ennuyeuse.

      Bonjour ? Ceci est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur de cet élément. Si nous maintenons les paragraphes à la même longueur, nous n'aurons pas cette différence de hauteur ennuyeuse.

Answer 1

Cela se produit parce que vous augmentez la largeur de la bordure, mais vous pouvez obtenir le même effet en utilisant la propriété box-shadow en css.

.project-table img {
  border: 6px solid white;
  width: 300px;
  transition: all 0.5s ease;
}

.project-table img:hover {
  border-color: #FF1D58;
  box-shadow: 0 0 0 6px rgba(255, 29, 88, 1);
}

td {
  padding: 0px 180px 0 0;
  width: 110px;
  text-align: center;
}

              Bonjour? Ceci est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur sur cet élément. Si nous gardons les paragraphes de même longueur, nous n'aurons pas cette différence de hauteur ennuyeuse.

                Bonjour? Ceci est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur sur cet élément. Si nous gardons les paragraphes de même longueur, nous n'aurons pas cette différence de hauteur ennuyeuse.

Answer 2

Utilisez box-shadow à la place de border

.project-table img {
  border:6px solid white;
  width:300px;
  transition:all 0.5s ease;
}
.project-table img:hover {
 border-color: #FF1D58;
 box-shadow: 0 0 0 7px rgba(255, 29, 88, 1);

}
td {
  padding: 0px 180px 0 0;
  width:110px;
  text-align:center;
}

              Hello? C'est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur
                de cet élément. Si nous gardons les paragraphes à la même longueur, nous n'aurons pas cette
                différence de hauteur ennuyeuse.

                Hello? C'est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur
                  de cet élément. Si nous gardons les paragraphes à la même longueur, nous n'aurons pas cette
                  différence de hauteur ennuyeuse.

Answer 3

Vous devez simplement conserver la même largeur de bordure avec et sans survol.

.project-table img {
  border: 12px solid white;
  width: 300px;
  transition: all 0.5s ease;
}

.project-table img:hover {
  border: 12px solid #FF1D58;
}

td {
  padding: 0px 180px 0 0;
  width: 110px;
  text-align: center;
}

      Bonjour? Ceci est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur de cet élément. Si nous gardons les paragraphes à la même longueur, alors nous n'aurons pas cette différence de hauteur ennuyeuse.

      Bonjour? Ceci est un paragraphe. J'essaie de voir quelle est la largeur et la hauteur de cet élément. Si nous gardons les paragraphes à la même longueur, alors nous n'aurons pas cette différence de hauteur ennuyeuse.