Add a CSS border on hover without moving the element [duplicate]

Solution 1:

You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

For elements that already have a border, and you don't want them to move, you can use negative margins:

.jobs .item {
    background: #eee;
    border: 1px solid #d0d0d0;
}

.jobs .item:hover {
   background: #e1e1e1;
    border: 3px solid #d0d0d0;
    margin: -2px;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

Another possible trick for adding width to an existing border is to add a box-shadow with the spread attribute of the desired pixel width.

.jobs .item {
    background: #eee;
    border: 1px solid #d0d0d0;
}

.jobs .item:hover {
    background: #e1e1e1;
    box-shadow: 0 0 0 2px #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

Solution 2:

add margin:-1px; which reduces 1px to each side. or if you need only for side you can do margin-left:-1px etc.

Add a CSS border on hover without moving the element [duplicate]

Solution 1:

Solution 2:

Related

Recent Posts