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
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.
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.
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.