css3 transition transform images - html

Question

Here is Demo 1 http://css3.bradshawenterprises.com/cfimg/
What I am trying to do is to add scale or rotate to this demo.
So it should be: when mouse over first img it will disappear and second img will appear and then will scale:
<div id="cf">
<img class="bottom" src="/images/Windows%20Logo.jpg" />
<img class="top" src="/images/Turtle.jpg" />
</div>
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity: 0;
}
#cf img.bottom:hover {
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
transition: opacity 1s ease-in-out;
}
I dont know if it is posible to do or I have to use js. I would like to do with pure css.
Thank you for your time!

Answer 1

Try adding z-index,like this:-
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
z - index: 1;
width: 300px;
height: 400px;
- webkit - transition: opacity 1s ease - in -out;
- moz - transition: opacity 1s ease - in -out;
- o - transition: opacity 1s ease - in -out;
transition: opacity 1s ease - in -out;
}
#cf img.top: hover {
opacity: 0;
z - index: 0;
}
#cf img.bottom: hover {
z - index: 2;
- o - transform: scale(1.5);
- moz - transform: scale(1.5);
- webkit - transform: scale(1.5);
transform: scale(1.5);
transition: opacity 1s ease - in -out;
}