同时在CSS中的两个图像中放大答案

【问题标题】：Zooming in and out the same time at two images in css同时在CSS中的两个图像中放大
【发布时间】：2015-01-28 04:15:52
【问题描述】：

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

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 的初学者。

【问题讨论】：

标签： html css

【解决方案1】：

您的代码 sn-p 是正确的。可能是您的图像链接不正确。根据您的代码，图像应位于您的主索引文件所在的同一文件夹中。

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

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

【讨论】：