Mouseover/Hover Image Enlarge Effect

[scottmeta]

A lot of modern websites I see these days have graphics that slighlty zoom in when you hover the mouse over them. I'd have though there would be a Xara widget for this by now, but I can't find anything on how to do this effect.
If you're not sure what I mean, this zoom is a nice reasonably fast slight enlarging effect, but kept within the size of the original image.
Anyone have any idea how to do this in Xara Web Designer Premium? Even if it involves editing HTML or CSS code.

Hope someone can help - it's an effect I'd really like to be able to use a lot.

Scott

[gwpriester]

Welcome to TalkGraphics

Put your slightly larger version on the mouseover layer. Link both objects to #

See attachment

[Acorn]

Sorry Gary, you've missed the point - the zoom is an inner one in that the size of the image does not change, only its zoom.

Here is a first rough cut: CSS - Inner Zoom Bodge.xar

It is a bodge as I have hidden the enlarge image in a frame.

I am still looking at a means to do it more cleverly without having to add a wrapper around the image.

It can be done with a simple JavaScript code for a single image but I've not checked for multiples and it's night-night here.

Perhaps some else will have it done overnight.

Acorn

Post-Note: here is an example of the code with a wrapper: https://www.magnigenie.com/creating-...3-transitions/

[scottmeta]

Hello Acorn, that seems to be exactly what I'm after. Hope I can figure out how you did it from your example.
If you figure out how to do it in a cleverer way then please let me know, but in the meantime I shall get on with doing it this way.
Thanks again for the quick reply.

[Initiostar]

Where you want this effect to be consistent across multiple objects, you would need the above type of process. Should you want to do just a few objects with a zoom, then you could manually create the effect (and in different ways too).



You place your image on the MouseOff layer, copy it to the MouseOver layer, increase its size to your choice and crop it back to the same size as the original image on the MouseOff layer.

You can add multiple image effects to either layer (in SOLO mode) and then Apply a Soft-group and link. It's not a precise way of doing this, but it does give an impression of a zoom. You don't of course need the boxes which I placed only on the MouseOff layer.

Gary

[gwpriester]

We Gary's think alike. That was my solution too.

[Acorn]

We Gary's think alike. That was my solution too.

If you compare my bodge or the on-line example, you will see the transition effects are really quite different. Xara's Zoom-In is no use either.

It is easy to set up for a "normal" website but Xara's coding gets in the way and I am getting nowhere fast.

Stuck at bodge for the moment.

Acorn

[Acorn]

Another step closer.

This is something I might do for my own purposes:

• Use Image Filename for a meaningful filename.
• Clone the image.
• In its Placeholder code (body), add:
• <div class="innerZoom" style="background-image: url('/index_htm_files/[Image Filename].jpg'); width:100%; height: 100%;" ></div>
  
  • If Retina is ticked, you can check and use ...url('/index_htm_files/[Image Filename]@2x.jpg');...
  
  
• In the Website > Code (head), include:

<style>

.innerZoom {
  background-size: 100%;
  transition: all 0.4s ease-in-out;
}
.innerZoom:hover {
  background-repeat: no-repeat;
  background-size: 105%;
  background-position: -10px -10px;
}
</style>

• Items in red can all be adjusted to suit your design.
• For some browser reason, background-position: center center; produces a weird (but interesting) result.
• Soft-group image and Placeholder.

I have been working on a fully automatic method but the scripting is a mess at present.

Acorn

[scottmeta]

Hello Acorn
Thanks again for your help with this.
Wondering if you have a moment to add a bit more detail on how you get this to work. I've tried following your steps, and backwards engineering your CSS-Inner Zoom Bodge.xar, but I still can't get it to work.
Any help gratefully appreciated.
Scott

[scottmeta]

Hello Acorn
Thanks again for your help with this.
Wondering if you have a moment to add a bit more detail on how you get this to work. I've tried following your steps, and backwards engineering your CSS-Inner Zoom Bodge.xar, but I still can't get it to work.
Any help gratefully appreciated.
Scott