[SBreland]

I am trying to put a smooth zoom in zoom out effect on stanzas of a poem I am building a page for. I have got the effect to zoom in like I want it on a mouse hover, but the transition is just snapping back to regular size with no transition effect when I move my mouse away.

#stanza:hover
	{
	-webkit-transition-property: all;
	-webkit-transform: scale(2,2); 
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-duration: 2.5s; 
	
	-moz-transition-property: all;
	-moz-transform: scale(2,2); 
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-duration: 2.5s;
	}

I have looked at the code at w3schools, but I don't seem to be able to get the same effect myself.

I am not sure how much of my style sheet is needed, if more is needed please let me know.

[RudiVisser]

You're only applying the transition on :hover, so that's only when the transition will be applied!

You should instead do something like this:

#stanza
{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-duration: 2.5s;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-duration: 2.5s;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: ease-in-out;
    -o-transition-duration: 2.5s;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: ease-in-out;
    -ms-transition-duration: 2.5s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: 2.5s;
}

#stanza:hover
{
    -webkit-transform: scale(2,2);
    -moz-transform: scale(2,2);
    -o-transform: scale(2,2);
    -ms-transform: scale(2,2);
    transform: scale(2,2);
}

[SBreland]

Thank you, that did exactly what I wanted.