border increase moves div on hover transition

Question

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 there is a better way to get a "glow" effect around the entire div itself?

I've tried setting elements as fixed, but that didn't help solve the problem.

Any help here is appreciated. Code and JS Fiddle below:

JS Fiddle: http://jsfiddle.net/w3kn1tun/

CSS:

body {
    height:97.54%;
    width:98.8%;
    background-color:#0C0C0B;
}
#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
}
#ne {
    background-image:url('news2.jpg');
    position:absolute;
    background-size:cover;
    height:50%;
    width:49.4%;
    left:50%;
    border-radius:10px;
}
#sw {
    background-image:url('drinks1.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49%;
    top:52.15%;
    border-radius:10px;
}
#se {
    background-image:url('clevelandday.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49.4%;
    left:50%;
    top:52.15%;
    border-radius:10px;
}
.titletext {
    text-align:center;
    margin:0;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
}
.outline {
    transition:all .4s ease-out;
}
.outline:hover {
    border:4px inset white;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='stylesheet2.css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,700' rel='stylesheet' type='text/css'>
    <title>CDC</title>
  </head>
  <body>
    <div id='nw' class='outline'>
      <p class='titletext'>Nightlife</p>
    </div>
    <div id='ne'>
      <p class='titletext'>News</p>
    </div>
    <div id='sw'>
      <p class='titletext'>Food & Drink</p>
    </div>
    <div id='se'>
      <p class='titletext'>Events</p>
    </div>
  </body>
</html>

possible duplicate of [CSS Border Inside Div not on edge](http://stackoverflow.com/questions/9601357/css-border-inside-div-not-on-edge) — Brian Dillingham, Sep 27 '14 at 17:34
@Lal That's what I was looking for. Thank you. Sometimes it just takes another perspective to spot something simple. — czmudzin, Sep 27 '14 at 17:37

Anonymous · Answer 1 · 2014-09-28T05:43:44.380

4

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;
}

edited Sep 28 '14 at 05:43

answered Sep 27 '14 at 17:29

Anonymous

10,002
3
23
39

2

Thanks, that works well. I guess I never used the box-sizing property enough to realize that would be the answer. – czmudzin Sep 27 '14 at 17:35

Lal · Accepted Answer · 2014-09-27T17:57:05.160

4

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

edited Sep 27 '14 at 17:57

answered Sep 27 '14 at 17:43

Lal

14,726
4
45
70

1

+1 for setting border first, prevents any movement when set and color change instead. – Brian Dillingham Sep 27 '14 at 17:47
Hey..thanks @Brian.. :) Hope you could give that +1 as votes.. ;) – Lal Sep 27 '14 at 17:49
1

I voted it :) it makes sense because it doesn't change the width – Brian Dillingham Sep 27 '14 at 17:50
@Lal ...and +0001) from me :) – Anonymous Sep 27 '14 at 17:59
1

you can use `transparent` as the initial color – Brian Dillingham Sep 27 '14 at 18:05
ya..i forgot that...thanks for coming up with that.. :) @Brian – Lal Sep 27 '14 at 18:24

score -1 · Answer 3 · answered Sep 27 '14 at 17:35

-1

Use outline: instead of border:

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

jsfiddle

answered Sep 27 '14 at 17:35

user3210787

137
7

how do you recommend the OP maintain the `border-radius`? – Brian Dillingham Sep 27 '14 at 17:40

border increase moves div on hover transition

3 Answers3

Linked