Kevin Powell - Community•2y ago

menu item over effect

Hi everyone I want realise the second effect on this video at 3:37min https://www.youtube.com/watch?v=qmtD6asybt4&t=227s when I had

ul li:before{
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: blueviolet;
}

ul li:before{
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: blueviolet;
}

I get a box who don't have a width and height of 100% can I get an explication please ?

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

7 Replies

Pat66OP•2y ago

my complete html code :

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

<li>
  <span> services</span> 
  <span> services</span>
</li>


<li>
  <span>portofolio</span>  
  <span>portofolio</span> 
</li>


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

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

<li>
  <span> services</span> 
  <span> services</span>
</li>


<li>
  <span>portofolio</span>  
  <span>portofolio</span> 
</li>


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

and my css code:

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

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

ul{
    display:flex;
   
}

ul li{
    display: block;
    position: relative;
   margin:0 10px;
    list-style-type: none;
    text-transform: uppercase;
    font-family: verdana;
    font-size: 2em;
    font-weight: bold;
    overflow: hidden;
   height: 32px;
  }
 ul li span{
    width: 100%;
    height: 100%;
    display: block;
    transition: .5s;
   
 }


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

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

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

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

ul li:before{
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: blueviolet;
}

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

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

ul{
    display:flex;
   
}

ul li{
    display: block;
    position: relative;
   margin:0 10px;
    list-style-type: none;
    text-transform: uppercase;
    font-family: verdana;
    font-size: 2em;
    font-weight: bold;
    overflow: hidden;
   height: 32px;
  }
 ul li span{
    width: 100%;
    height: 100%;
    display: block;
    transition: .5s;
   
 }


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

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

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

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

ul li:before{
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: blueviolet;
}

Chris Bolson•2y ago

You need to continue with the video. Your pseudo element isn't the same as what they have done in the video. Once you complete that step your code will work the same as the video at this point. As an aside, this video es a few years old, amongst other things that have changed in CSS since then one notable thing is that they have used the old single colon syntax for the pseudo elements.
Whilst the single colon syntax still works for backwards compatibility, these should now use double colons. So ul li:before{ would become ul li::before{ More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements Note - the single colon is still used for pseudo-classes (hover, after, focus etc.)

Pat66OP•2y ago

thanks for your answers when you said "Your pseudo element isn't the same as what they have done in the video." are you talking about <a></a>

Chris Bolson•2y ago

ul li:before{
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: blueviolet;
}

ul li:before{
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: blueviolet;
}

` This is your pseudo element. It isn't complete yet. Once you have that the same as the video that part should be working. In the video this block looks like this:

ul li:before {
  content: "";
  position: absolute;
  top:-90px;
  left:-65px;
  width:300px;
  height:300px;
  background-color: #00f;
  z-index: -1;
  opacity: 0;
  transition: 0.5s
}

ul li:before {
  content: "";
  position: absolute;
  top:-90px;
  left:-65px;
  width:300px;
  height:300px;
  background-color: #00f;
  z-index: -1;
  opacity: 0;
  transition: 0.5s
}

I realise that you have changed some values to adjust to your design but you are still missing others such as the positioning.

Pat66OP•2y ago

ok now I had it without the opacity

Pat66OP•2y ago

the result

Chris Bolson•2y ago

https://codepen.io/cbolson/pen/abRKpgG A similar effect without the extra html and duplicated texts by using a data attribute to get the contents of the "hidden" text that slides up on hover. I'm not 100% convinced by it as it requires some hard-coded values. I'll keep at it later. * I haven't take it as far as the animated images. Sorry, I missed out the last line when I copied it. `transform: translateY(100px);``

Gaming

Programming

menu item over effect

Did you find this page helpful?