html - css3 transition transform 图片

Question

这是演示 1 http://css3.bradshawenterprises.com/cfimg/

我想要做的是在这个演示中添加缩放或旋转。所以应该是：当鼠标悬停在第一个 img 上时，它会消失，第二个 img 会出现，然后会缩放：

   <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做。感谢您的时间！

Answer 1

尝试添加 z-index，如下所示：-

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