CODEWITHSUNDEEP
htmlcss
czmudzin
czmudzin

Reputation: 299

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

Upvotes: 1

Views: 2018

Answers (3)

Anonymous
Anonymous

Reputation: 10216

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

Upvotes: 4

Lal
Lal

Reputation: 14810

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

Upvotes: 4

user3210787
user3210787

Reputation: 157

Use outline: instead of border:

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

jsfiddle

Upvotes: -1

Related Questions