html – div Expand its size on hover due to border-ThrowExceptions

Exception or error:

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>
How to solve:

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>

###

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

###

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>

###

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

###

There are many ways to do that ill show the best two

1: use border of same color as background

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

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

2: Use border as transparent and then on hover make that colored

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

NOTE: Use html tag for the specific action to perform In your case Please use button tag

###

Try adding a max-width to the parent

Leave a Reply

Your email address will not be published. Required fields are marked *