Question

我想用两张图片同时放大和缩小。如下链接：

http://css3.bradshawenterprises.com/cfimg/#cfimg4

我复制了它的样式但不起作用：

  <style>
  #cf4 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }
  #cf4 img {
    position:absolute;
    left:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #cf4 img.top {
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;

  }

  #cf4:hover img.top, #cf4.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
  }

  #cf4:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(0,0);
    transform-origin: bottom left;
  }

  </style>
  <div id="cf4" class="hover">
    <img class="bottom shadow" src="one.jpg">
    <img class="top shadow" src="two.jpg">
  </div>

我是CSS的初学者。

Answer 1

您的代码段是正确的。可能是您的图片没有正确链接。根据您的代码，图像应位于主索引文件所在的同一文件夹中。

工作解决方案就在这里。 http://jsbin.com/poqeto/2/

检查出来。如果您遇到同样的问题，请详细发布问题（从第一行到最后一行的所有代码）。

同时放大和缩小css中的两个图像

1 个答案: