Hi all

With this rsd file I am trying to get the image to 'zoom in' on hover - not a big zoom but enough to give it some movement.

On hover, I have enabled the focal point (not sure if this is the right way to do this) but cannot get the transitions to work so that the zoom in is smooth.

Thanks in advance

Jamie

Hi Jamie,
When you say smooth do you mean slow? Do you want the effect to take longer to complete?

exactly that Eric

You probably need to use a transition

I have been tryiong to but to no effect

Select your image
Select your selector.
Select Hover for state.
Under Transition select Transform ( Scale, Rotate, etc)
Leave the defaults for now.
Next go down and select Effects near the bottom of the right menu and adjust the scale up or down for x and y.
Check to see if that works then you can start playing with different settings to get the desired look.

ok thats getting there - thanks - but using the effects and x or y scale forces the image to increase in size and show outside of the container (see http://prntscr.com/gn10u6) rather than just zooming in

Jamie,

One way to do what you are asking is to put the photo in as a background on a container. Put some padding on the photo and change the clip to content box in the background settings and then use custom for the size and make it a little smaller. When you adjust the hover state you can increase the size back up and the photo will get clipped by the padding.

Look at this example file and go through the setting for the container with the image. Background settings and Dimensions settings on both states (hover and regular). You can add transition/time to adjust how fast it is, etc.

http://exploration.coffeecup.com/
Here's the example live...

Jeff

Use a background image on a div instead of an embedded image.

For a linked image you can also use a container div with overflow hidden (in POSITION), that's similar to Jeff's great example.