How to add border top on hover?

Question

I have this category img and on hover effect appear border top red and my title goes down for 2 px. How can I fix this by removing this 2 px.

      .box {
            display: inline-block;
            background: pink;
            margin-right: 10px;
            width: 187px;
            min-height: 70px;
            height: 100%;

            &:hover {

                background: #F2F2F2;
                border-top: 3px solid #E72D35;
            }
        }

Does this answer your question? [How to prevent div elements from moving when border is applied to div?](https://stackoverflow.com/questions/69251761/how-to-prevent-div-elements-from-moving-when-border-is-applied-to-div) — mgm793, Aug 05 '22 at 12:53
Would be great if you can share the HTML structure, especially the position for the text. — Yong Shun, Aug 05 '22 at 13:01

score 2 · Answer 1 · answered Aug 05 '22 at 13:06

Include a border of the same width but transparent in the original state to keep the same size and text position for both states. You also might want to add a little transition, BTW, for a smoother effect:

.box {
  display: inline-block;
  background: pink;
  margin-right: 10px;
  width: 187px;
  min-height: 70px;
  height: 100%;
  border-top: 3px solid transparent;
  transition: all 0.3s;
}

.box:hover {
  background: #F2F2F2;
  border-top: 3px solid #E72D35;
}

<div class="box">Box 1</div>
<div class="box">Box 2</div>

score 0 · Answer 2 · answered Aug 05 '22 at 12:58

 .box {
            display: inline-block;
            background: pink;
            margin-right: 10px;
            width: 187px;
            min-height: 70px;
            height: 100%;
            border-top: 3px solid transparent;

            &:hover {

                background: #F2F2F2;
                border-color: #E72D35;
            }
        }

score 0 · Answer 3 · answered Aug 05 '22 at 13:02

I'm no expert, but I had an idea (I hope I understood the problem correctly) to add a 3px padding and remove it on hover, I applied it here:

.box {
         display: inline-block;
         background: pink;
         margin-right: 10px;
         width: 187px;
         min-height: 70px;
         height: 100%;
         padding-top: 3px
     }
.box:hover {
             background: #F2F2F2;
             border-top: 3px solid #E72D35;
             padding-top: 0px;
         }

https://codepen.io/bahax/pen/RwMyGyg

How to add border top on hover?

3 Answers3