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

css3过渡变换图像

1 个答案: