div Expand its size on hover due to border

Question

I have a div that when i hover another div inside it, i added a border effect on hover to the inner div and the parent div also expand to the width of the border added to the child div how can i stop this. here we can see the behavior in this fiddle

.payment-box {
  padding: 5px;
  text-align: center;
  border: 1px solid blue;
  width: 150px;
}

.payment-logo {
  height: 100px;
}

.payment-link {
  color: #fff;
  padding: 12px;
  background: #E2231A;
  margin: 20px auto 5px auto;
  display: inline-block;
  font-weight: 550;
}

.payment-link:hover {
  color: #E2231A;
  border: 1px solid #E2231A;
  background: #fff;
}

<div class="col-md-4">
  <a href="">
    <div class="payment-box">
      <div class="payment-logo">
        <img src="logo.jpg" width="100%" height="100%" alt="logo" />
      </div>
      <div class="payment-link">
        click here
      </div>
    </div>
  </a>
</div>

score 2 · Answer 1 · answered Feb 25 '20 at 10:16

Give payment-link transparent border and on hover add border-color

.payment-link{
    border: 1px solid transparent;
}

.payment-link:hover{
    border-color: #E2231A;
}

Or just give payment-link a border-color

.payment-link{
    border: 1px solid #E2231A;
}

score 1 · Accepted Answer · answered Feb 25 '20 at 10:12

Why not just start your button with a border, instead of adding it on hover? As it's the same colour as the background, it makes no difference to the non-hover state

.payment-box {
  padding: 5px;
  text-align: center;
  border: 1px solid blue;
  width: 150px;
}

.payment-logo {
  height: 100px;
}

.payment-link {
  color: #fff;
  padding: 12px;
  background: #E2231A;
  margin: 20px auto 5px auto;
  display: inline-block;
  font-weight: 550;
  border: 1px solid #E2231A; /* move this from the hover */
}

.payment-link:hover {
  color: #E2231A;
  background: #fff;
}

<div class="col-md-4">
  <a href="">
    <div class="payment-box">
      <div class="payment-logo">
        <img src="logo.jpg" width="100%" height="100%" alt="logo" />
      </div>
      <div class="payment-link">
        click here
      </div>
    </div>
  </a>
</div>

yeah you're right, just a border to the link rather than on hover since it's the same color — sam, Feb 25 '20 at 10:31
you can make the border transparent too instead of the same color of the page. — Squall32, Jul 02 '22 at 21:33

score 0 · Answer 3 · answered Feb 25 '20 at 10:09

0

Add a transparent border to the link:

 .payment-link{
  color: #fff;
  padding: 12px;
  background: #E2231A;
  margin: 20px auto 5px auto;
  display: inline-block;
  font-weight: 550;
  border: 1px solid transparent;
 }

answered Feb 25 '20 at 10:09

Roberto Zvjerković

9,657
4
26
47

score 0 · Answer 4 · answered Feb 25 '20 at 10:12

There are multiple ways to achieve this. Here are 2:

Replace border with box-shadow

.payment-box{
  padding:5px;
  text-align: center;
 border:1px solid blue;
  width: 150px;
 }

 .payment-logo{
  height: 100px;
  
 }

 .payment-link{
  color: #fff;
  padding: 12px;
  background: #E2231A;
  margin: 20px auto 5px auto;
  display: inline-block;
  font-weight: 550;
 }

 .payment-link:hover{
  color: #E2231A;
  box-shadow: 0 0 0 1px #E2231A;
  background: #fff;
 }

<div class="col-md-4">
  <a href="">
    <div class="payment-box">
      <div class="payment-logo">
        <img src="logo.jpg" width="100%" height="100%" alt="logo" />
      </div>
      <div class="payment-link">
        click here
      </div>
    </div>
  </a>
</div>

Use a transparent border on the normal state

.payment-box{
  padding:5px;
  text-align: center;
 border:1px solid blue;
  width: 150px;
 }

 .payment-logo{
  height: 100px;
  
 }

 .payment-link{
  color: #fff;
  padding: 12px;
  background: #E2231A;
  margin: 20px auto 5px auto;
  display: inline-block;
  font-weight: 550;
  border: 1px solid transparent;
}

 .payment-link:hover{
  color: #E2231A;
  border: 1px solid #E2231A;
  background: #fff;
 }

<div class="col-md-4">
  <a href="">
    <div class="payment-box">
      <div class="payment-logo">
        <img src="logo.jpg" width="100%" height="100%" alt="logo" />
      </div>
      <div class="payment-link">
        click here
      </div>
    </div>
  </a>
</div>

score -1 · Answer 5 · answered Feb 25 '20 at 10:06

-1

Try adding a max-width to the parent

answered Feb 25 '20 at 10:06

Jacob Kurtsen

43
1
8

div Expand its size on hover due to border

5 Answers5