# \[Pro\] CSS Zoom Effect

**URL:** https://discourse.softpress.com/t/pro-css-zoom-effect/22973
**Category:** Freeway
**Created:** [January 5, 2016, 9:53pm UTC](https://discourse.softpress.com/t/pro-css-zoom-effect/22973 "2016-01-05T21:53:22Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Dave\_Dunning](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/e0b2c6/32.png) [@Dave\_Dunning](https://discourse.softpress.com/u/Dave_Dunning)
#### Post date: [January 5, 2016, 9:53pm UTC](https://discourse.softpress.com/t/pro-css-zoom-effect/22973/1 "2016-01-05T21:53:22Z")

</div>

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/](http://simplegang.com/css-image-effects/)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

### Author: ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)
#### Post date: [January 5, 2016, 10:20pm UTC](https://discourse.softpress.com/t/pro-css-zoom-effect/22973/2 "2016-01-05T22:20:25Z")

</div>

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

David

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

### Author: ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)
#### Post date: [January 5, 2016, 10:43pm UTC](https://discourse.softpress.com/t/pro-css-zoom-effect/22973/3 "2016-01-05T22:43:01Z")

</div>

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.

```auto
<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:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

### Author: ![Dave\_Dunning](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/e0b2c6/32.png) [@Dave\_Dunning](https://discourse.softpress.com/u/Dave_Dunning)
#### Post date: [January 5, 2016, 10:44pm UTC](https://discourse.softpress.com/t/pro-css-zoom-effect/22973/4 "2016-01-05T22:44:45Z")

</div>

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](http://actionsforge.com/actions/css3-rollover)
> 
> David

* * *

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

---

<div class="post-metadata">

### Author: ![Dave\_Dunning](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/e0b2c6/32.png) [@Dave\_Dunning](https://discourse.softpress.com/u/Dave_Dunning)
#### Post date: [January 5, 2016, 10:51pm UTC](https://discourse.softpress.com/t/pro-css-zoom-effect/22973/5 "2016-01-05T22:51:41Z")

</div>

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.
> 
> ```auto
> 
> ```
> 
> 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](https://freewaytalk.softpress.com/person/options)