[Pro] CSS Zoom Effect

Freeway
1

Hi All

I’m trying to get a CSS Zoom effect as per these examples to work on images in Pro. I know where to add the CSS code but I’m drawing a blank on how to get the effect to link with the desired image etc, can anyone help please?

Cheers
Dave

http://simplegang.com/css-image-effects/

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Have you looked at Tim Plumb’s action http://actionsforge.com/actions/css3-rollover

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

And if you want to use those specific examples then firstly you have to add the CSS to your page ie for the simple zoom. Use page>html Markup and paste the following into the before (before end head) scetion.

<style type="text/css">
.d-Zoom
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-Zoom:hover
{
transform:scale(1.1);
box-shadow:0px 0px 10px #777;
}
</style>

Now select your image on the FW page and use Item>Extended to add the following name/value pair of class/d-Zoom to your img

And that is it - preview.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Thanks DD that’s great, not sure how I’ve missed that one, but I’d really like to crack the CSS code way so I can apply more creative effects that work with HTML items etc.

Dave

On 5 Jan 2016, 10:20 pm, DeltaDave wrote:

Have you looked at Tim Plumb’s action http://actionsforge.com/actions/css3-rollover

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

Thanks DD that’s great, I’d got the markup in the right place but I was adding the extended to the instead of the , swapped it over and all sorted.

Cheers
Dave

On 5 Jan 2016, 10:43 pm, DeltaDave wrote:

And if you want to use those specific examples then firstly you have to add the CSS to your page ie for the simple zoom. Use page>html Markup and paste the following into the before (before end head) scetion.

Now select your image on the FW page and use Item>Extended to add the following name/value pair of class/d-Zoom to your img

And that is it - preview.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options