Stop table elements from shifting position when hovering?

Question

So I have a table with two rows. One more images, one for a paragraph underneath. The images link to different web pages, and I have an animation where the border grows and changes color but I don't want the image to move position when it hovers. Any way can I prevent the image from doing this?

.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;
}

<table class="project-table">
  <tr>
    <td>
      <a href="https://thebenlusted.github.io/jsauthentication/" target="_blank" title="JavaScript Authenticator"><img src="images/js-auth-screenshot.png"></a>
    </td>
    <td>
      <a href="https://google.ca" target="_blank" title="FrickIt Studios Website"><img src="images/sigma-site-screenshot.png"></a>
    </td>
  </tr>
  <tr>
    <td>
      <p>Hello? This is a paragraph. I am trying to see what the width and height is on this element. If we keep the paragraphs at the same length then we won't have this lame height difference.
      </p>
    </td>
    <td>
      <p>Hello? This is a paragraph. I am trying to see what the width and height is on this element. If we keep the paragraphs at the same length then we won't have this lame height difference.
      </p>
    </td>
  </tr>
</table>

Jignesh Panchal · Answer 1 · 2020-01-21T06:18:32.287

It's happening because you increase width of border, But you can same do this with same affect by using css property box-shadow.

.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;
}

<table class="project-table">
            <tr>
              <td><a href="https://thebenlusted.github.io/jsauthentication/" target="_blank" title="JavaScript Authenticator"><img src="images/js-auth-screenshot.png"></a></td>
              <td><a href="https://google.ca" target="_blank" title="FrickIt Studios Website"><img src="images/sigma-site-screenshot.png"></a></td>
            </tr>
            <tr>
              <td><p>Hello? This is a paragraph. I am trying to see what the width and height is
                on this element. If we keep the paragraphs at the same length then we won't have this
                lame height difference.
              </p></td>
              <td>
                <p>Hello? This is a paragraph. I am trying to see what the width and height is
                  on this element. If we keep the paragraphs at the same length then we won't have this
                  lame height difference.
                </p>
              </td>
            </tr>
          </table>

Udhay Titus · Accepted Answer · 2020-01-21T06:39:43.257

use box-shadow instead of 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;
}

<table class="project-table">
            <tr>
              <td><a href="https://thebenlusted.github.io/jsauthentication/" target="_blank" title="JavaScript Authenticator"><img src="images/js-auth-screenshot.png"></a></td>
              <td><a href="https://google.ca" target="_blank" title="FrickIt Studios Website"><img src="images/sigma-site-screenshot.png"></a></td>
            </tr>
            <tr>
              <td><p>Hello? This is a paragraph. I am trying to see what the width and height is
                on this element. If we keep the paragraphs at the same length then we won't have this
                lame height difference.
              </p></td>
              <td>
                <p>Hello? This is a paragraph. I am trying to see what the width and height is
                  on this element. If we keep the paragraphs at the same length then we won't have this
                  lame height difference.
                </p>
              </td>
            </tr>
          </table>

score 1 · Answer 3 · answered Jan 21 '20 at 06:04

You just need to keep same border width with and without hovering.

.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;
}

<table class="project-table">
  <tr>
    <td>
      <a href="https://thebenlusted.github.io/jsauthentication/" target="_blank" title="JavaScript Authenticator"><img src="images/js-auth-screenshot.png"></a>
    </td>
    <td>
      <a href="https://google.ca" target="_blank" title="FrickIt Studios Website"><img src="images/sigma-site-screenshot.png"></a>
    </td>
  </tr>
  <tr>
    <td>
      <p>Hello? This is a paragraph. I am trying to see what the width and height is on this element. If we keep the paragraphs at the same length then we won't have this lame height difference.
      </p>
    </td>
    <td>
      <p>Hello? This is a paragraph. I am trying to see what the width and height is on this element. If we keep the paragraphs at the same length then we won't have this lame height difference.
      </p>
    </td>
  </tr>
</table>

Stop table elements from shifting position when hovering?

3 Answers3