Image hover enlargement

[Dencuga]

Hello.

One question: is there a way to make this:
when I point mouse over the image or vector object, to show that object enlarged (2x, 3X size or more) ?
I mean the same thing when we click to object, and the it show enlarged in pop-up photo menu dialog.
I am sure that it is possible, but I don't know how ...

[Boy]

Copy the object and paste it on a new layer. In the Layer Gallery, make sure the new layer is situated above the MouseOver layer. Enlarge the copied object to the desired size and position it where you want it to appear. With the original object selected, go to Utilities/Web Animation/Mouse-over and under 'Show pop-up layer', select the layer on which the copied and enlarged object is placed. Click Apply.

[Acorn]

Clone the object.
Scale x2 or x3 and place in the MouseOver layer.

Select the original.
In Web Properties > Image > Photo pop-up, set the width to a multiple of the pixel width of the original.

Soft-group both objects.

Acorn

[Dencuga]

Yes, that's it. Thank you guys
But Acorn, Boy's way is exactly what I want, just to hover mouse over the object, without click on it.
Your instruction implies that I have to click on it.

[Acorn]

Yes, that's it. Thank you guys

Dencuga, also untick Clip to page edges in the Web Properties > Website tab if the objects are close to the page edge and you want them to be fully visible.

Do note Boy's approach is different to mine.

I believe his will not hover.
Each pop-up needs to be on a different layer.

Mine relies on the built-in HighSlide component.
You end up with three separate objects.

I personally use some CSS for the hover part:

<style>
.twice {
  transition: 1200ms;
}
.twice:hover {
  transform: scale(200%);
}
</style>

The downside is if you scale too much, the resolution may suffer.

Acorn

[Boy]

Do note Boy's approach is different to mine.

I believe his will not hover.

It sure will.

[Dencuga]

Acorn, please can you submit XWD file with that sample ?

[Acorn]

It sure will.

Boy, great to be corrected.
I misread your Web Animation part.

@Dencuga
If you want the hover to have the pop-up appear anywhere, use Boy's approach, as you have stated.
If the MouseOff and MouseOver objects are overlapping then place on the MouseOver layer; this saves lots of additional Layers. The MouseOff object will need a Link (I use javascript: ; for this).
To avoid any extra images or layers, use my code. Just add a name htmlclass="twice" to every required object.
I read into your OP that you wanted both. Apologies.

An elaboration of my code has already ben covered in https://www.talkgraphics.com/showthr...le-Image-Hover.

Acorn

[Acorn]

Acorn, please can you submit XWD file with that sample ?

Here is a demo of both approaches: CSS - Hover demo.xar

Acorn