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
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
my complete html code :
and my css code:
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
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.)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>
`
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:
I realise that you have changed some values to adjust to your design but you are still missing others such as the positioning.
ok now I had it without the opacity
the result
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);``