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
Pat66
Pat662y 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
Chris Bolson2y 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.)
Pat66
Pat662y 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
Chris Bolson2y 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.
Pat66
Pat662y ago
ok now I had it without the opacity
Pat66
Pat662y ago
the result
Chris Bolson
Chris Bolson2y 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);``
Want results from more Discord servers?
Add your server