H3ll0 H3ll0 - 27 days ago 7
CSS Question

Divs move downwards when padding expands on hover

I have two divs, when one hovers over the text (which are links) of a div, the padding increases from 0 to 5px. My issue is that whenever I hover over the text and the padding increases, the divs move down. Here's the code:

<div id="container" class="text1">
<a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>

<div id="container" class="text2">
<a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>


#container {
position:relative;
}


a:link, a:visited, a:active {
color:blue;
}


a:hover {
color:yellow;
}


.text1box {
left:200px;
bottom:35px;
width:243px;
}


#text1style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}


#text1style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}


.text2 {
left:455px;
bottom:57px;
width:90px;
}


#text2style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}


#text2style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}


Updated code: I have applied the padding expansion to the individual links, instead of the div, and this has helped out. I still have two issues: 1) The texts (of links) still shift slightly to the right. 2) When I remove the mouse (i.e: hover ends) you can see that the text has lost padding and border radius as the background (red) fades away.

How could I resolve these two issues? Many thanks.

Answer

You can do that by moving the 2 boxes upward to compensate for the padding moving them downward.

And id should be unique

.container {
  position: relative;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  -webkit-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  transition: background-color 0.5s;
  background-color: red;
  text-align: center;
}
.box1 {
  left: 200px;
  /*bottom: 35px;*/
  width: 221px;
  border-radius: 10px;
}
.box2 {
  left: 455px;
  /*bottom: 57px;*/
  width: 66px;
  border-radius: 10px;
}
a:link,
a:visited,
a:active {
  color: blue;
}
a:hover {
  color: yellow;
}
.container:hover {
  top: -5px;
  padding: 5px 0;
  background-color: dodgerblue;
}
.container.box1:hover + .box2 {
  top: -10px;
}
<div id="container1" class="container box1">
  <a href="#" style="font-size:120%;
text-decoration:none;">Some text</a>
</div>

<div id="container2" class="container box2">
  <a href="#" style="font-size:120%;
text-decoration:none;">text</a>
</div>

Based on question edit, updated with a 2:nd sample, where I added padding: 0 5px to the a:link rule to compensate for the hovered padding

#container1, #container2 {
  position: relative;
}
a:link,
a:visited,
a:active {
  color: blue;
  padding: 0 5px;
}
a:hover {
  color: yellow;
}
.text1box {
  left: 200px;
  bottom: 35px;
  width: 243px;
}
#text1style {
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  -webkit-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
#text1style:hover {
  padding: 5px;
  border-radius: 10px;
  background-color: red;
}
.text2 {
  left: 455px;
  bottom: 57px;
  width: 90px;
}
#text2style {
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  -webkit-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
#text2style:hover {
  padding: 5px;
  border-radius: 10px;
  background-color: red;
}
<div id="container1" class="text1">
  <a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>

<div id="container2" class="text2">
  <a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>

Comments