Buttons overlap on zoom

1

Good day.

I am trying to do the following. Have a hover affect over a button where it expands so the content is legible and then a clickthrough to a page dealing with the content. I have three problems;

  1. The buttons do not align once I export.
  2. There is an overlap on mouseover (I can not make it a click as the click needs to go to a page).
  3. It does not show when I try to embed it in a Wordpress site (I have tried all the solutions I could find posted in the forms - I suspect it may in part be due to the file size as it is quite large when complete).

Is this a known occurrence with buttons or I am leaving something out? I tried doing this with scenes, but the document gets very heavy and the scenes only work once for some reason. I also do not have enough Javascript knowledge to make it work as a group, which might be ideal as the group scales to a certain percentage?

Any pointers would be very welcome.

Thank you.

2

Can you share a document? perhaps an example of just 1 button and what you want to do.[quote="Nouveautopia, post:1, topic:6892"]
The buttons do not align once I export.
[/quote]
I understand what you're saying but difficult to know what is happening without seeing an example.

Not sure how you've added the buttons here. Are they Hype button elements or just Text elements animated. Again a document would help highlight this otherwise there may be a waste of time with suggestions if they are not what you are doing.

Is the overlap another element that is covering the hovered element?
If that element doesn't need any interaction then you could click the "ignore all pointer events" in the Actions tab in the inspector which would make it effectively transparent to clicks.

There could be a few reasons here so a share of the embed or again a document will help.

3

Thank you for the reply DBear, I attached the html file, I can include the Hype doc as well if that will help?

House.zip (1.5 MB)

4

I added Hype buttons and embedded the images in them, on hover they zoom to 180%. The buttons overlap each other at zoom.
I am adding the Hype doc as well, as I see from your questions that there could be many issues.
In terms of the embed; I tried the solution in the video tutorials as well as the plugin (https://wordpress.org/plugins/hype-animations/).

House 2.zip (1.3 MB)

5

Hi @Nouveautopia

a) Buttons do not align
c) Does not show on embed

This is because you have both width and height scale turned on. Turn these off. Height scale needs a height dimension from it's containing or parent div (element) in order for it to show when embedded inside another div (element). (There are a few posts on this in the forum)

b) There is an overlap

If you add these functions to both the on Mouse over and on Mouse out to each element then you should be good to go

on Mouse Over

startIndex = hypeDocument.getElementProperty(element, 'z-index')

hypeDocument.setElementProperty(element, 'z-index', 100)

and on Mouse Out

hypeDocument.setElementProperty(element, 'z-index', startIndex)

P.S if you put this in the Head HTML of your document (or the stylesheet that you use within Wordpress) then you'll get some nice animated effects on the hover and transforms.

<style>
.btn {
    transition: tranform .6s;
}
</style>

this means that would have to give all your "buttons" a class of 'btn' for it to be applied. You can do this by selecting them all and adding it in the inspector.

6

Thank you very much for the input. I have redone it, but I think I am still missing something as I still have an overlap on Mouse Over?

DIY HOUSE.zip (983.8 KB)

7

Typo in my code above

startIndex = hypeDocument.getElemenetProperty....

should be

startIndex = hypeDocument.getElementProperty...
8

Fantastic, it works!

Thank you very much for all the help DBear.

9

Hi DBear, just wanted to thank you again for the help with my first Hype project. This is live now: http://abe.co.za/diy-house/

Thank you very much!

1 Like
10

looks good! you’re welcome