|
Post by blueisland on Jul 12, 2021 14:51:09 GMT
I want to resize and image that is displayed on my website and for that event to happen for 1 second on mouseover
The image is 100 x 100px
In the code editor for the image (in the mouseover tab) I have placed this code
[#picture2].style.width='200px'; [#picture2].style.height='200px';
What follows to make this event duration for 1 second
Thanks for any help
|
|
|
Post by J on Jul 14, 2021 14:57:55 GMT
Hi Blueisland,
I think it might be possible to achieve that using an animated transform. Applying a transform to temporarily affect an object avoids shifting or enlarging the image itself, and should create a nice smooth effect. I will see whether I can come up with some actual code to do it.
Cheers, J
|
|
|
Post by J on Jul 14, 2021 17:14:02 GMT
Give this a try in the object's mouse over event tab:
this.style.transition='1s ease-in-out'; this.style.transform='scale(120%)';
...and then the following in its mouse out tab:
this.style.transform='scale(100%)';
That gives a smooth resize over 1 second, when the mouse cursor hovers over the object, and returns it to its original size when the mouse leaves the object.
Cheers, J
P.S. Note that the transition only needs to be set once, so you can omit it from mouse out.
|
|
|
Post by Frank on Jul 14, 2021 23:55:16 GMT
Very cool!
|
|
|
Post by blueisland on Jul 15, 2021 9:25:04 GMT
Thanks for the replies I found a solution on an older thread stormdance.proboards.com/thread/6236/re-size-image-mouse-overHere is the solution I got (for 2 second duration) mouse over this.style.transform='scale(1.5)'; this.style.transition='transform .2s';;" mouse out this.style.transform='scale(1.0)'; this.style.transition='transform .2s';;" Easy when you know how
|
|