Add a CSS Border on Hover Without Moving the Element

Add a CSS border on hover without moving the element

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>

CSS: Adding border to button on hover. How avoiding a shifting of the following elements?

Add "margin" attributes to your "button" CSS like so:

button {
  border-radius: 4px;
  padding: 5px 10px;
  margin: 4px 0;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
  margin: 0;
}

From Stop an element moving with padding on hover.

When I make border in hover, another element slightly moved, how to make it stayed in their position?

you can use this trick

.navbar-menu a{
    color: inherit;
    text-decoration: none;
    padding: 8px;
    border: 2px solid transparent; /* add this line */
}

so basically initially border is transparent and on hover it only gets color visible and hence no mess up in position

How to make text not move around after adding border

Instead of adding a border, just change the color of the border.

function toHomePage(){
    window.location.replace("...");
};
$(document).ready(function(){
    $(".navBar").mouseenter(function() {
        $(this).css("borderColor","black");
    }).mouseleave(function() {
        $(this).css("borderColor","gainsboro");
    });
})

.navBar {
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: none;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    border: 2px solid gainsboro;
}
 #Title {
     color: black;
     font-family: monospace;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Help.css">
    <title>Help</title>
</head>
<body>
    <div class="navBar" onclick="toHomePage()">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Help.js"></script>
</body>
</html>

how can i increase border width on hover without dislodging the div position in css?

The simplest would be to set box-sizing: border-box; and increase the elements size with the border's now set width.

Since box-sizing: border-box; make border width within the size of the element, it will keep its size on a border resize.

Side notes:

Don't forget to add the non-prefixed transition: border .4s ease-in; to your rule.

Be also aware of that dotted borders in Firefox and Edge/IE11 doesn't look the same as in Chrome.

FF doesn't show it at all actually, Dashed border not showing in firefox

#f {  left:10px;  top:10px;  position:fixed;  box-sizing: border-box;  border:10px dotted #0db;  border-radius:50%;  width:53px;  height:53px;  -webkit-transition: border .4s ease-in;  -moz-transition: border .4s ease-in;  -o-transition: border .4s ease-in;  transition: border .4s ease-in;}
#f:hover {  border: 20px dotted #fb0;}

<div id="f"></div>

div Expand its size on hover due to border

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>

How to stop images movement after border hover?

You can use box-shadow:

img:hover {  -webkit-box-shadow: 0px 0px 0px 5px #005FD0;  -moz-box-shadow: 0px 0px 0px 5px #005FD0;  box-shadow: 0px 0px 0px 5px #005FD0;}

<center>  <a class="round" href="http://coreneto.com/rental/cars">    <img src="http://coreneto.com/rental/static/dist/img/cam.jpg" width="200" height="200">  </a>    <a class="round" href="http://coreneto.com/rental/cars">    <img src="http://coreneto.com/rental/static/dist/img/car.jpg" width="200" height="200">  </a>    <a class="round" href="http://coreneto.com/rental/tickets">    <img src="http://coreneto.com/rental/static/dist/img/phone.jpg" width="200" height="200">  </a></center>

Adding border on hover shifts surrounding elements

When you add, or change the width, of a border, that changes the size of the element. Hence, by adding the border on hover, the box grows to occupy more space, which naturally shifts the position of surrounding text / elements.

One method to resolve this issue is to always have the border present, so the size of the box is fixed. When the border shouldn't be visible, it's transparent.

Here's an example:

section {  position: relative;  height: 300px;  padding: 15px 80px;  z-index: 1;}section h1 {  font-size: 3em;  font-weight: 100;  line-height: 1.3;}section a {  position: relative;  display: inline-block;  text-decoration: none;  transition: all 0.3s ease-in-out;  vertical-align: bottom;}section.twelve {  background: #121A5A;  color: #FFFAFF;}section.twelve a {  color: #D8315B;  font-weight: 700;  overflow: hidden;  padding: 0px 5px;  transition all 0.2s ease;  border-bottom: 5px solid transparent;   /* ADJUSTMENT */}.twelve a:before {  content: "";  top: 0;  left: 0;  position: absolute;  width: 100%;  height: 100%;  background: #FFFAFF;  z-index: -1;  transition: all 0.2s ease;  transform: translateX(100%);}.twelve a:hover::before {  transform: translateX(-95%);  background: #D8315B;}.twelve a:hover {  color: #FFFAFF;  transform: translateX(5px);  border-bottom: 5px solid white;       /* ADJUSED */}

<section class="twelve">  <h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1></section>

My li elements move downwards when I hover over them

Adding margin: -2px; resolves this, its due to the border: 2px orangered.

.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    margin: -2px;
    border-radius: 3px;
}

/*primary nav bar*/
.primarynav {
    background-color: #ffffff;
    border: solid 1px #f76f4d;
    position: relative;
    height: 50px;
    width: 1430px;
    top: 10px;
}

.primarynav ul {
    position: relative;
    padding-bottom: 10px;
    text-decoration: none;
    padding-left: 100px;
}

.primarynav a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fd886b;
    width: 115px;
    height: 50px;
    padding: 17px 0px 0px 0px;
    font-weight: bold;
    border: 1px solid orangered;
}

/*primary navigation effects*/
/*.primarynav a:hover::before {
    background-color: #fd886b;
    
}
*/

.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    margin: -2px;
    border-radius: 3px;
}

.mainnavigation li {
    display: inline-block;
    bottom: 51px;
    padding-top: 50px;
    text-align: center;
    position: relative;
    font-size: 15px;
    left: 200px;
}

<header class="primarynav">
      <div class="primaryContainer"> <!-- Main top of page navigation -->
        <nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
          <ul class= "mainnavigation">
            <li><a href="Index.php">Home</a></li>  
            <li><a href="#">Items</a></li> 
            <li><a href="#">Categories</a></li>
            <li><a href="#">Favourites</a></li>
            <li><a href="#">Deals</a></li>
            <li><a href="#">List An Item</a></li>
          </ul>
        </nav>
      </div>
   </header>

I want to add a border to my button on hover event without moving the button or anything

You could try using a box shadow instead, as this doesn't actually affect the positioning:

a {  transition: all 0.8s;  margin: 5px;  text-decoration: none;  display: inline-block;  background: lightgray;  height: 50px;  width: 150px;  line-height:50px;  text-align: center;  color:black;}a:hover {  box-shadow: 0 -3px red;}

<a href="#">HOVER ME</a><a href="#">NOTICE</a><a href="#">HOW</a><a href="#">I</a><a href="#">DON'T</a><a href="#">MOVE?</a>

Add a CSS Border on Hover Without Moving the Element