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

by

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>

More Related Contents:

  1. Detect the type of font that is displayed in an image [closed]
  2. Responsive css background images
  3. Any way to declare a size/partial border to a box?
  4. What is the opposite of :hover (on mouse leave)?
  5. Inline SVG in CSS
  6. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  7. How to make a floated div 100% height of its parent?
  8. SVG animation is not working on IE11
  9. How to make fixed header table inside scrollable div?
  10. Placing Unicode character in CSS content value [duplicate]
  11. CSS flexbox not working in IE10
  12. Google Chrome Extensions – Can’t load local images with CSS
  13. CSS endless rotation animation
  14. Double border with different color [duplicate]
  15. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  16. background image, linear gradient jagged edged result needs to be smooth edged
  17. CSS: 100% width or height while keeping aspect ratio?
  18. Sass @each with multiple variables
  19. CSS: Width and Max-Width
  20. Is the :before pseudo-element allowed on an input[type=checkbox]?
  21. Why doesn’t min() (or max()) work with unitless 0?
  22. Table column sizing
  23. How to create a radial menu in CSS?
  24. Overlay a background-image with an rgba background-color
  25. What does @-moz-document url-prefix() do?
  26. CSS select multiple descendants of another element
  27. Select all ‘tr’ except the first one
  28. How can I align 3 divs side by side?
  29. How to override the properties of a CSS class to avoid copying and renaming styles
  30. text overflow ellipsis: avoid word break

Leave a Comment