menu hover effect

Hi everyone I want rebuilt this effect https://www.youtube.com/watch?v=qmtD6asybt4 my code :

 <main class="content">

       <ul>
          <li>
            <span>home</span>
            <span>home</span>
          </li>
          <li>
            <span>service</span>
            <span>service</span>
          </li>
          <li>
<span>contact</span>
<span>contact</span>
          </li>
          <li>
            <span>about</span>
            <span>about</span>

          </li>
          <li>  
            <span>team</span>
            <span>team</span>
        </li>
         
       </ul>


    </main>

 <main class="content">

       <ul>
          <li>
            <span>home</span>
            <span>home</span>
          </li>
          <li>
            <span>service</span>
            <span>service</span>
          </li>
          <li>
<span>contact</span>
<span>contact</span>
          </li>
          <li>
            <span>about</span>
            <span>about</span>

          </li>
          <li>  
            <span>team</span>
            <span>team</span>
        </li>
         
       </ul>


    </main>

the css:

*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
}

.content{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

ul{
position: relative;
list-style-type: none;
display: flex;

}

ul li{
    position: relative;
    text-transform:capitalize;
    font-size: 2em;
    text-align: center;
  font-family: verdana;
  font-weight: bold;
 height: 50px;
  display: block;
  overflow: hidden;
  color: black;
  margin: 0 10px;
 }


 ul li span{
    width: 100%;
    height: 100%;
    display: block;
 }

ul li span:nth-child(1){
    color: blue;
}

ul li span:nth-child(2){
    color:purple;
}

ul li:hover span:nth-child(1){
    transform: translateY(-100%);
}

*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
}

.content{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

ul{
position: relative;
list-style-type: none;
display: flex;

}

ul li{
    position: relative;
    text-transform:capitalize;
    font-size: 2em;
    text-align: center;
  font-family: verdana;
  font-weight: bold;
 height: 50px;
  display: block;
  overflow: hidden;
  color: black;
  margin: 0 10px;
 }


 ul li span{
    width: 100%;
    height: 100%;
    display: block;
 }

ul li span:nth-child(1){
    color: blue;
}

ul li span:nth-child(2){
    color:purple;
}

ul li:hover span:nth-child(1){
    transform: translateY(-100%);
}

the problem is the hover is not working my text disappear on the hover. can I get some explication thanks by advance.

Online Tutorials

YouTube

Creative Menu Item Hover Effects | CSS Hover Effects

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Music Credit Track: Tobu - Roots [NCS Release] Music provided by NoCopyrightSounds. https://www.youtube.com/watch?v=7wNb0pHyGuI

4 Replies

Jochem•17mo ago

you're not done with the video by the looks of things your CSS moves the first span out of view instantly because of the transform without a transition property, and the second one isn't moved because you're missing the ul li:hover span:nth-child(2) rule

Pat66•17mo ago

Thanks for your answers

Kevin Powell•17mo ago

I'd also suggest adding aria-hidden to the duplicate text. If someone on a screen reader came across that navigation, it would read all the text to them, so they'd hear the same word two times. That would be really annoying 😅 By simply adding aria-hidden="true" to second span in each one, you solve that issue.

Pat66•17mo ago

thanks

Gaming

Programming

menu hover effect