如何扩大一个图像，只有在向上的一面超出其容器宽度提供时，其悬停在它

我正在尝试创建一个页面，如果用户将悬停在包装器div内的任何图像上，图像将稍微向上扩大包装器div，但与我的代码图像只增加其宽度，它仍然在包装器div仅用于例如:

.Wrap {
  width: 100%;
  border: 1px solid red;
}
.Wrap ul {
  list-style: none;
  padding: 15px;
}
.Wrap ul li {
  display: inline-block;
  padding: 20px;
  transition: background-color 0.3s ease-in-out;
}
.Wrap ul li:hover {
  background-color: blue;
}
.Images {
  width: 100px;
  transition: width 0.8s ease, height 0.8s ease;
}
.Wrap ul li:hover .Images {
  width: 300px;
}

<body>
  <div class="Wrap">
    <ul>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1">
      </li>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2">
      </li>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3">
      </li>
    </ul>
  </div>
</body>

我还尝试使图像位置相对并将其从底部移动，但在这种情况下，只有图像向上移动，背景仍然在包装器div中，仅用于例如:

.Wrap {
  width: 100%;
  border: 1px solid red;
}
.Wrap ul {
  list-style: none;
  padding: 15px;
}
.Wrap ul li {
  display: inline-block;
  padding: 20px;
  transition: background-color 0.3s ease-in-out;
}
.Wrap ul li:hover {
  background-color: blue;
}
.Images {
  width: 100px;
  transition: width 0.8s ease, height 0.8s ease;
}
.Wrap ul li:hover .Images {
  width: 300px;
  position:relative;
  bottom:100px;
}

<body>
  <div class="Wrap">
    <ul>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1">
      </li>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2">
      </li>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3">
      </li>
    </ul>
  </div>
</body>

我对输出的要求是这样的，图像应该增加它的宽度，应该在它的包装器div上面放大大约40到50像素，同时它的背景是完整的。

既然您列出了CSS3，我已经尝试用scale()和translate3d()而不是width和height进行过渡。这是你想要达到的目标吗?你可以根据自己的喜好调整<li>和<img>的比例和转换值。

你还需要添加适当的CSS，使其跨浏览器。

.Wrap {
  width: 100%;
  border: 1px solid red;
  position: relative;
}
.Wrap ul {
  list-style: none;
  padding: 15px;
}
.Wrap ul li {
  display: inline-block;
  padding: 20px;
  transform: scale(1) translate3d(0, 0, 0);
  transition: background-color 0.3s ease-in-out, transform 0.8s ease;
}
.Wrap ul li:hover {
  background-color: blue;
  transform: scale(1.8) translate3d(0, -20px, 0);
}
.Images {
  width: 100px;
  /* transition: width 0.8s ease, height 0.8s ease; */
}
.Wrap ul li:hover .Images {
/*
  width: 300px;
  position:relative;
  bottom:100px;
  transform: scale(2);
*/
}

  <div class="Wrap">
    <ul>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img1">
      </li>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img2">
      </li>
      <li>
        <img src="https://s11.postimg.org/bj57qwh8z/vlcsnap_error262.png" class="Images" alt="" id="#img3">
      </li>
    </ul>
  </div>

相关内容

最新更新

热门标签：