CSS

Hover Border Enlargement

This example shows how to modify an elements border without changing the size of the element in the DOM. This can be accomplished by using the box-shadow css property to create the added border width on hover. Unlike a border, the box-shadow does not take size in the DOM, and therefore will not affect the positioning.

This box-shadow declaration

box-shadow: 0 0 1px 1px black;

Would render the same as:

border: 1px solid black;

Given this markup for example,

<div class="wrapper">
    <div>
        <h5>Container "A"</h5>
    </div>
    <div>
        <h5>Container "B"</h5>
    </div>
</div>

Here is some css to demonstrate a border color change and 2px thickness on hover using a box-shadow for the 1px increase.

body {
	background-color: #f8f8f8;
}
.wrapper {
 	display: flex;
}
.wrapper div {
 	background: #fff;
  	margin: 1.5rem;
  	padding: 1.5rem;
  	border: 1px solid #708090;
  	border-radius: 3px;
}
.wrapper div:hover {
  	border-color: black;
	box-shadow: 0 0 1px 1px black;
}

demo and edit this code in our online sandbox

comments powered by Disqus