photo zoom

[soaringeagle]

dave h requested this tip  its a simple zoom transition when yiu hover over a photo without clicking full size

a.next_photo_link img:hover {transform:scale(1.20);-ms-transform:scale(1.20);-o-transform:scale(1.20);-webkit-transform:scale(1.20);-moz-transform:scale(1.20);-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;transition:all 1s ease-out;-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;}

its only a 20% zoom  but for larger pics any more then that  would be too much i think

to adjust the finished zoom level adjust the scale:1.20 (meaning 120% or 20% above normal)

u can slow or speed up the transition by changing the 1s tip you can use decimals like 3.5s or even ms like 10ms for a very fast transition

(note for newbies to css the -webkit- etc prefixes  are used to increae browser compatability so if you adjust 1 adjust all  so the experience is the same no matter what browser)

[Woody13]

dang...

[soaringeagle]

haha..umm ..that means u like it? haha

[dave]

Yes and thanks very much soaringeagle for your help, It'sa work of art :-)

[soaringeagle]

was nothing i mean u saw it took me less then a minute or 2 to throw it together for you

[Scott Bishop]

Do you place that code into the custom code box or the appearance section?

[soaringeagle]

appearance css

[Erik Woods]

When you use vendor prefixes, I believe it is best practice to list the prefixes first, and the standard declaration (without prefix) last. I believe Dan Cederholm mentions it in CSS3 for Web Designers but I can't recall where. But basically, it is to future-proof your code for browsers which will eventually drop the vendor prefixes and use the standard...... or something like that.

In other words...

Change this:
transform:scale(1.20);
-ms-transform:scale(1.20);
-o-transform:scale(1.20);
-webkit-transform:scale(1.20);
-moz-transform:scale(1.20);
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;

To this:
-ms-transform:scale(1.20);
-o-transform:scale(1.20);
-webkit-transform:scale(1.20);
-moz-transform:scale(1.20);
transform:scale(1.20);
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;

[soaringeagle]

hmm interesting  ill keep that in mind

[limor]

does anyone have an example? 

i would like to see it first :) 

[soaringeagle]

http://www.dreadlockssite.com/photo

[limor]

i know... I meant I want to see a site implementing this code...

I would like to see how it looks :)

[George H. Compton IV]

 I'm using this code you can check it out here

http://friendlyfaces.ning.com/photo/419210-383033358379815-10000019...