Hello everyone, i am a graphic designer and i am creating my portfolio with wix. I would like very much that in my portfolio the hover effect would be just passing on the text, which by default the customer service told me it’s impossible, and that it would work just with the hover boxes. What i would like is to have an effect that, passing with the cursor on the text, will display my projects on a full page (that’s why i need this, and the box is not right). Hope you guys can help me. Have a good day!
There are buttons available with no button outline … and I believe you can match the text with the background page color, font style and font size. Those are hover friendly.
mabye
Cheers
Gordy
Hi H G R, thanks for the answer.
I’ve tried that, but it is not what i want. If you have few minutes to watch it, here is a link of the effect that i would like, thanks.
https://www.marcomarino.design/project.html
As you will be able to see, the images will appear just by passing on the text. Please let me know if you have any ideas or suggestions, as this effect that i want to give is blocking the
hereinafter of my portfolio. Thanks
Got it … Yeah, I think I misunderstood what you wanted. Cool effect. Good luck, will be watching for the answer.
Cheers
It is not hover, it is mouseIn and mouseOut and yes you can do it.
onMouseIn for when the mouse is moved over the text to show the hidden image and onMouseOut for when the mouse is moved back off the text to hide again the image.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#show
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#hide
Just setup your page as you want it to be setup with your moving gif or video background at the back and everything else on top of it.
Split your page up into the four sections that you want to have setup for you images and make sure that they are in front of your background and setup as hidden on load in each of the properties panel of the four elements.
Then simply place a text box element in the middle of each of this four image boxes and add the onMouseIn and onMouseOut code to that text element. You will need to make sure that the four text boxes are at the front of the page otherwise they will get overlayed by the image.
Again as the hidden on load for the four images, you will need to do the onMouse events for each of these four text boxes in their properties panel for each one.
When you add the onMouseIn and onMouseOut events in the properties panel for each text box, you will get code added to your page like this on the page tab
export function yourtextbox1_mouseIn(event) {
Simply add the image show code underneath it like this
export function yourtextbox1_mouseIn(event) {
$w("#yourimage1").show();
Do the same for onMouseOut, just make sure that it is the opposite.
export function yourtextbox1_mouseIn(event) {
$w("#yourimage1").hide();
You will need to do this for all four of the text boxes along with a onMouseIn and onMouseOut function for all of your images too.
Note though, that onMouse will not work for mobile devices, so you will need to either use onClick for mobile devices only or not have it displayed on mobile devices.
If you want to add code like an onClick event that works on mobile only, then you can simply use Wix Window API and its Form Factor function.
Finally, if you read the tutorial above for mobile only code, it will show you exactly how to do the onMouse events and show and hide code for the onMouse events for your page as well!
So basically you are copying a Webflow website and wanting to incorporate it into a Wix website.
I have a menu (with some elements) and I want to change the colour of the text whenever my mouse hover towards that text. Help, please!!
Please open your own new post, with your own well and in detail described issue/situation.
Which elements are used in your project?
- some screenshots?
- expecting end-result?