soaringeagle did a a nice zoom effect with photo's for me some time ago which has been very popular as i see it on a lot of networks. Great work Se :-)
I have added A border which gives your photo a more polished look with the zoom, and as i'm running a 3 column site there is 1 column always on the right and the photo would zoom strait out so i added 70px translate which you can remove if it does not suit your site, but on mine.. this keeps the photo in the centre of the web page. The shadow is a nice effect and adds a little more depth to the photo,
I've left the 1.65 values in just incase you do not need the translate values.
Remember you can always test in your Test Site. And variables can be changed
I have attached 2 files, 1 showing the border and 1 showing the shadow effect,
my site is quite dark but on a lighter coloured site the shadow would stand out great.
Enjoy :-)

a.next_photo_link img:hover {transform:scale(1.65);-ms-transform:scale(1.65);-o-transform:scale(1.65);-webkit-transform:scale(1.65);-moz-transform:scale(1.65);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;
-moz-box-shadow: 1px 27px 47px #000000;
-webkit-box-shadow: 1px 27px 47px #000000;
box-shadow: 1px 27px 47px #000000;
transform: rotate(0deg) scale(1.593) skew(0deg) translate(70px);
-webkit-transform: rotate(0deg) scale(1.593) skew(0deg) translate(70px);
-moz-transform: rotate(0deg) scale(1.593) skew(0deg) translate(70px);
-o-transform: rotate(0deg) scale(1.593) skew(0deg) translate(70px);
-ms-transform: rotate(0deg) scale(1.593) skew(0deg) translate(70px);
border:ridge 10px #666366;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

Tags: BORDER, EFFECT, PHOTO, SHADOW, ZOOM

Views: 210

Attachments:

Reply to This

Replies to This Discussion

Okay, I tried your code and I did not see any effect.  How exactly do you zoom to a photo?  I assume it takes more than just clicking on the view full size command?

nice job Dave!

Thanks Armani :-)

Hi Doone, pick a photo out that you want to look at, Click the photo and it takes you to the page where you can have a better look at the photo.. Now just move your curser over the photo and it will zoom out with a border and shadow around the photo.

A better view of the Border and shadow around your photo on zoom..The border adds a nice TV like appearance which i think is very effective.

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Stig Karlsen replied to Stig Karlsen's discussion 'Smartphone & Tablet ready? NOT TRUE!'
"Yes! Social Engine seems to be on top of everything including a smooth system for tablets and…"
13 minutes ago
Kos replied to John Bizley's discussion 'How To Add A Link In The Footer Back To The Creators Page Before The Ning Items'
"hmmm didn't work for me.  I'll have to take a look at Firebug in the morning. …"
2 hours ago
Randy L. Vollett replied to George H. Compton IV's discussion '( tip N3 ) the importance of CSS @media Queries - And how to use them.'
"Thanks so much George. I am really getting into my designs so much that our site is getting too…"
2 hours ago
soaringeagle replied to Monica Diaz's discussion 'MIGRATING TO NING 3.0 STATUS [UPDATE #2]'
"the price oif food wenjt up so i wrotte  to  every farmer and said i dont want to spend…"
3 hours ago

NC for Hire
SweetPotato replied to Monica Diaz's discussion 'MIGRATING TO NING 3.0 STATUS [UPDATE #2]'
"I think John McDonald left Ning. SP"
3 hours ago
George H. Compton IV replied to George H. Compton IV's discussion '( tip N3 ) the importance of CSS @media Queries - And how to use them.'
"You're welcome Randy.   On the bottom piece of code I meant to change that to 60. I…"
3 hours ago
Randy L. Vollett replied to George H. Compton IV's discussion '( tip N3 ) the importance of CSS @media Queries - And how to use them.'
"Thanks George. Now that i see the code and my page in action that's the jump start i needed.…"
5 hours ago
soaringeagle replied to Monica Diaz's discussion 'MIGRATING TO NING 3.0 STATUS [UPDATE #2]'
"you already were grandfathered at  a special rate "
5 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service