Issue
Good afternoon,
i'm new at css and i'm trying to get this vertical right side menu to work. The problem: when i hover over the images they get bigger (this is intended) but when i hover between the images everything seems to jump and i can't figure out why.
can anyone help me? Thanks
body {
font-family: "Quicksand", sans-serif;
font-size: 18px;
font-weight: 400;
color: #eee4e4;
overflow-x: hidden;
}
ul {
list-style-type: none;
box-sizing: border-box;
float: right;
position: fixed;
z-index: 1000;
right: 0;
top: 0;
height: 100%;
overflow: auto;
text-align: center;
}
li {
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
border: solid 2px blue;
}
img {
height: 40px;
width: 40px;
}
img:hover {
width: 50px;
height: 50px;
}
li:hover {
padding-right: 0px;
padding-bottom: 0px;
}<body>
<!-- Social Media NAV -->
<nav>
<ul>
<li>
<a href="#"><img src="img/facebook1.svg" alt="Facebook"></img>
</a>
</li>
<li>
<a href="#"><img src="img/twitter1.svg" alt="Twitter"></img>
</a>
</li>
<li>
<a href="#"><img src="img/instagram1.svg" alt="Instagram"></img>
</a>
</li>
<li>
<a href="#"><img src="img/whatsapp1.svg" alt="Whatsapp"></img>
</a>
</li>
</ul>
</nav>
</body>Solution
This is because you also have a li:hover that is affecting the padding.
Maybe an alternative solution could be using transform in the <img> and remove the li:hover
img:hover {
transform: scale(1.2)
}
Answered By - daniel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.