Re: Image hover enlargement
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.
Re: Image hover enlargement
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
Re: Image hover enlargement
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.
Re: Image hover enlargement
Quote:
Originally Posted by
Dencuga
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:
Code:
<style>
.twice {
transition: 1200ms;
}
.twice:hover {
transform: scale(200%);
}
</style>
The downside is if you scale too much, the resolution may suffer.
Acorn
Re: Image hover enlargement
Quote:
Originally Posted by
Acorn
Do note Boy's approach is different to mine.
I believe his will not hover.
It sure will.
Re: Image hover enlargement
Acorn, please can you submit XWD file with that sample ?
Re: Image hover enlargement
Quote:
Originally Posted by
Boy
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
1 Attachment(s)
Re: Image hover enlargement
Quote:
Originally Posted by
Dencuga
Acorn, please can you submit XWD file with that sample ?
Here is a demo of both approaches: Attachment 130521
Acorn