Border Increase Moves Div On Hover Transition

In this example, I've added an inset border transition on hover. However, when the border appears, it seems to push the div down to the right. Is there a way around this? Maybe the

Solution 1:

The problem with your code was that you were adding a border when it was hovered. JsFiddle Demo

So, here I've changed your CSS as follows

.outline {
    transition:border .4s ease-out;
    border:4px solid #0C0C0B;
}
.outline:hover {
    border-color:white;
}

I made a div with a border with colour same as that of the background colour, and changed that to white only when it is hovered. This solution wont move your div contents while hovered

Solution 2:

Add box-sizing: border-box; to #nw

JSFiddle - DEMO

#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

OR: You could add border-width: 4px; and border-style: solid; to #nw

JSFiddle - DEMO

#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
    border-width: 4px;
    border-style: solid;
}

Solution 3:

Use outline: instead of border:

.outline:hover {
    outline: 4px inset white;
}

jsfiddle