Whenever I'm hovering over one of the items in my list everything starts flickering and moves back and forth. What I want to do is having this list. When hovering over one of the elements it should then print the text to the right side of the image. I would like that the image I'm hovering stays in place as everything else moves aside and the text has a typewriter effect applied to it.
var nav = document.querySelectorAll('#nav li');
for (i = 0; i < nav.length; i++) {
nav[i].className = 'hover'
}
var pnav = document.querySelectorAll('#nav p');
for (i = 0; i < pnav.length; i++) {
pnav[i].className = 'typewriter'
}body {
background-color: #0f1621;
margin: 0;
display: flex;
justify-content: center;
min-height: 100%;
}
#nav {
margin-top: 25%;
}
#nav li {
display: inline-block;
padding: 2px;
color: white;
}
.hover a:hover+p {
display: inline-block;
}
p {
display: none;
font-size: 20px;
}
.typewriter {
color: #fff;
font-family: monospace;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
border-right: .15em solid orange;
animation: typing 1s steps(30, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}<ul id="nav">
<li>
<a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a>
<p> Socials</p>
</li>
<li>
<a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a>
<p> LinkedIn</p>
</li>
<li>
<a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a>
<p> Resume</p>
</li>
</ul>I change #nav to flex and some css properties in .hover a:hover+p and p. Then i had little problems with adjusting the text to the bottom next to the colored box. I use margin-top: xxxPX. Maybe exists a better solution to positioned the text. But it works.
var nav = document.querySelectorAll('#nav li');
for (i = 0; i < nav.length; i++) {
nav[i].className = 'hover'
}
var pnav = document.querySelectorAll('#nav p');
for (i = 0; i < pnav.length; i++) {
pnav[i].className = 'typewriter'
}body {
background-color: #0f1621;
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
}
#nav {
margin-top: 5%;
display:flex;
}
#nav li {
display: flex;
padding: 2px;
color: white;
}
.hover a:hover+p {
display: block;
margin-bottom: auto;
margin-top: auto;
margin-top:127px;
}
p {
display: none;
font-size: 20px;
}
.typewriter {
color: #fff;
font-family: monospace;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
border-right: .15em solid orange;
animation: typing 1s steps(30, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}<ul id="nav">
<li>
<a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a>
<p> Socials</p>
</li>
<li>
<a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a>
<p> LinkedIn</p>
</li>
<li>
<a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a>
<p> Resume</p>
</li>
</ul>It took me more time than expected as I was sure there was a bug in the script, but I was wrong the issue is with the @keyframes typing, just change the width to 35% and your problem will be solved
@keyframes typing {
from {
width: 0;
}
to {
width: 35%;
}
}
var nav = document.querySelectorAll('#nav li');
for (i = 0; i < nav.length; i++)
{
nav[i].className = 'hover'
}
var pnav = document.querySelectorAll('#nav p');
for (i = 0; i < pnav.length; i++) {
pnav[i].className = 'typewriter'
} body {
background-color: #0f1621;
margin: 0;
display: flex;
justify-content: center;
min-height: 100%;
}
#nav {
margin-top: 25%;
}
#nav li {
display: inline-block;
padding: 2px;
color: white;
}
.hover a:hover+p {
display: inline-block;
}
p {
display: none;
font-size: 20px;
}
.typewriter {
color: #fff;
font-family: monospace;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
border-right: .15em solid orange;
animation: typing 1s steps(30, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 35%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: orange;
}
}<ul id="nav">
<li>
<a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a>
<p> Socials</p>
</li>
<li>
<a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a>
<p> LinkedIn</p>
</li>
<li>
<a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a>
<p> Resume</p>
</li>
</ul>I have solved your problem. Its quite easy to solve all you need to add following code to your CSS.
First of your #nav need a display property:
display:flex;
Secondly your #nav li need following properties:
display:flex;
align-items:flex-end;
I hope this will fix your problem...