How to create a mouse hover child reveal effect

1.First create a shape with a particular colour lets say blue

2.Next create button that will act like a trigger, but its fake and place it on the shape you earlier created

3.Next select the text box and rename the the content to match your topic

4.Group the button and the text and Position them well on the first shape you coloured blue

5.Now here come the magic. Create a new button and do the following under styling;

Fill the buttont space with the information you will like reveal during mouse hover.

On click select do nothing

FONTS

Size- 14pts,

Txt color- transparent,

Alignment-fully justified

BACKGROUND

Fill - transparent

Content - none

Uncheck Border, Shadow and Rounding.

MOUSE HOVER

background colour - choose the same colour on the first shape you created

And the text color - choose white

MOUSE CLICK

Use the same settings as in mouse hover

ANIMATE - uncheck

6.Finally place this button right on top of the shape, text and button you created earlier. Make sure the borders does not exceed the borders of the shape. Viola test it in your browser and see the effects. check the video tutorial link https://www.dropbox.com/s/tagfuqxo4of2isa/Mouse%20hover%20effect.mov?dl=0

3 Likes

Cool hack, thanks @khammond!

Hello,

I must be awake badly, but I don’t understand the purpose of this manipulation. (my level of English is not great to top it all off!)

Why do this procedure if the button is not accessible by click?

I’m going to go get some coffee while I wait for your answer (^_^)

Thank you
Nicolas

I also failed to see the purpose of the button, on the other hand it’s a nice ‘hack’ to reveal explanation text to an image. I have experienced some (nice) unexpected behaviour when using animation with groups.

Great question, Nicholas that is if am getting your right. It’s the intent. If I’ve stated specs on the button, am telling visitors to click that button to find out. If the mouse even doesn’t get to the button but achieve the result the visitor is expecting viola you’ve nailed it. The end result of this hack is the effect. The visitor only cares about getting that results, Additionally I did this to add some interactivity and shorten the length of the page or adding additional pages purposely for that intent. Hope I have clear your head with your hot coffee. Please see the effect of the hack on this site. https://www.gatsltd.com/cctv.html both in desktop and mobile view. The lick works best and well in the mobile view or format.

2 Likes

How did you make the menu with red line ?
Have solved it, it was very easy.
It looks god.

Cool affect but it bothers me some.

There is an obvious red button in each blue box. But I can’t click it. It disappears when I mouse over the blue box. Something about a button that I can’t get to to click on bothers me. It just doesn’t “feel” right. I like the affect overall but think it would be better if the text didn’t appear until I mouse over the red button.

1 Like

Yes, Marshal, the sparkleapp is coming up with a widget that reveals child info during mouse hover. Until then we have to cheat for while just to get the desired results expected. if you click on the button what you are expected to get is the information you’re seeking for. But because don’t have the real widget the only way out is to display the result desired when the mouse gets closer to the button. This effect works best when viewed with a mobile. Have. a look at it with your mobile.

1 Like

Thanks Gjo, am glad you liked it. Lets together make the sparkleapp relevant.

Thanks khammond. It still bother me though. LOL

ok je comprends beaucoup mieux avec l’exemple ! Merci pour ce complément d’info.
Nicolas

@khammond
Thanks for this idea. It’s great … I’ll use it for my idea to create a little quiz like “Memory”. (see my last post)