html - css3 トランジション変換イメージ

Question

ここにデモ 1 があります http://css3.bradshawenterprises.com/cfimg/

私がやろうとしているのは、このデモにスケールまたは回転を追加することです。そうあるべきです: 最初の画像の上にマウスを置くと消え、2番目の画像が表示されてから拡大縮小されます:

   <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;
    }

それが可能かどうか、またはjsを使用する必要があるかどうかはわかりません。純粋なcssでやりたいです。お時間をいただきありがとうございます！