I have a few links that are scaled and have their backgrounds changed with 1s transitions on hover. When hovering the first link, it is scaled so big that it hovers the other links and the other links are visible under it. The second link, when hovered, does not appear under the first link but appears under the third link. The third link does not appear under any other link.
a {
color: lightblue;
transform: scale(1);
transition: all 1s;
display: inline-block;
background-color: transparent;
}
a:hover {
transform: scale(5);
background-color: yellow;
}<div class="page-footer">
<a href="">ABCD</a> /
<a href="">EFGH</a> /
<a href="">IJKL</a>
</div>I see this behavior on both Chrome and Firefox. I do not understand why it works this way and I wish to make the links' backgrounds behave normally.
Thank you.
It's because of the order, in normal flow the only stacking context that exist is the <html> and an element will be covered by the next element that comes after it in the markup.
Using z-index, the rendering order of certain elements is influenced, However z-index won't have any effect because z-index only work with positioned elements.
Positioned element: Is an element with position value other than static
We can use position:relative because it behaves like static.
a {
color: lightblue;
transform: scale(1);
transition: all 1s;
display: inline-block;
background-color: transparent;
z-index: 1;
}
a:hover {
transform: scale(5);
background-color: yellow;
position: relative;
z-index: 2; /* higher than other <a> */
}
/* Just to center Not needed */
div {
display: table;
margin: 5em auto;
}<div class="page-footer">
<a href="">ABCD</a> /
<a href="">EFGH</a> /
<a href="">IJKL</a>
</div>