- This topic has 11 replies, 3 voices, and was last updated 4 months ago by
Elvin.
-
AuthorPosts
-
October 31, 2020 at 6:39 pm #1512965
Gabriela
Hello, for the header of my website i would like to have this type of effect when the user hovers on my name: https://www.youtube.com/watch?v=GS4hFHqZlUQ
Is this possible?
Thank you!
November 1, 2020 at 5:45 am #1513296David
StaffCustomer SupportHi there,
can you link me to your site so i can see the header content ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 1, 2020 at 10:25 pm #1514020Gabriela
Absolutely
November 1, 2020 at 11:15 pm #1514048Elvin
StaffCustomer SupportHi,
Your reference provided the code. You just need to replace the selector.
Example:
.elementor-element-45049c2 .elementor-widget-container h1 a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 120px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: gray; } .elementor-element-45049c2 .elementor-widget-container h1 a:before{ content: 'GABRIELA URBANO'; color: black; position: absolute; width: 0; overflow: hidden; transition: 0.9s; } .elementor-element-45049c2 .elementor-widget-container h1 a:hover:before{ width: 100%; }
A wise man once said:
"Have you cleared your cache?"November 2, 2020 at 8:09 am #1514773Gabriela
By using that code, the whole header disappears. I tried modifying it a little, but it still does not look right
November 2, 2020 at 6:37 pm #1515441Elvin
StaffCustomer SupportSince you’re working w/ Elementor Heading widget, try this code instead:
selector h1{ overflow:hidden; position: relative; } selector a:before{ content: 'GABRIELA\a0 URBANO'; color: black; position: absolute; overflow: hidden; transition: 0.9s; width:0; } selector a:hover:before{ width:100%; }
After adding this, go to the Heading Setting’s Advanced > Positioning setting and set the “Width” setting to “Inline”. Then go to the heading’s container direct container column and set its horizontal alignment to center to keep it center.
You should arrive at something that looks something like this:
https://share.getcloudapp.com/X6udjkgXA wise man once said:
"Have you cleared your cache?"November 2, 2020 at 7:00 pm #1515447Gabriela
It did not change color
November 2, 2020 at 7:15 pm #1515459Elvin
StaffCustomer SupportTry this:
selector h1{ overflow:hidden; position: relative; } selector a:before{ content: 'GABRIELA\a0 URBANO'; color: yellow; position: absolute; overflow: hidden; transition: 0.9s; width:0; } selector a:hover:before{ width:100%; }
Here’s a demo of this animation. demo site
Here’s a demo video of the settings: https://share.getcloudapp.com/6quP19oO
A wise man once said:
"Have you cleared your cache?"November 2, 2020 at 7:30 pm #1515465Gabriela
Oh I see, I do not have the pro version of elementor, so I have been adding all my code into wordpress
Is there still a way to do it?
November 2, 2020 at 7:42 pm #1515470Elvin
StaffCustomer SupportOh I see, I do not have the pro version of elementor, so I have been adding all my code into wordpress
Is there still a way to do it?
Oh if that’s the case, we can revert back to the specific selectors from previous replies.
.elementor-element-45049c2 .elementor-widget-container h1{ overflow:hidden; position: relative; } .elementor-element-45049c2 .elementor-widget-container a:before{ content: 'GABRIELA\a0 URBANO'; color: yellow; position: absolute; overflow: hidden; transition: 0.9s; width:0; } .elementor-element-45049c2 .elementor-widget-container a:hover:before{ width:100%; }
A wise man once said:
"Have you cleared your cache?"November 2, 2020 at 7:44 pm #1515471Gabriela
It work for the most part, but it looks like if there was more text on top
November 2, 2020 at 8:04 pm #1515483Elvin
StaffCustomer SupportStrange,
It should work as shown on the demo site and videos. Perhaps there are other settings that prevents the
:before
from displaying properly.Note: Since this is a 3rd party plugin outside of GeneratePress’ scope, you may wanna try asking Elementor’s support about this as well. They may have another angle regarding this issue.
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.