使用CSS过渡创建特定的放大效果

Question

为了可视化预期效果，请转到本网站底部的“餐饮服务”部分，然后将鼠标悬停在这三个图像上。

我希望我的图像在悬停时放大-高度和宽度增加-同时其周围的框架缩小，并带有溢出：当然是隐藏的。

到目前为止，这是我写的内容：

<style type="text/css">

  .container {
    float: left;
    width: 50%;
    margin: 0 auto;
  }

  .frame {
    width: 80%;
    height: 50%;
    overflow: hidden;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
  }

  .frame:hover {
    width: 70%;
    height: 45%;
  }

  .frame > img {
    width: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
  }

  .frame:hover {
    width: 120%;
  }
</style>

<div class="container">
    <div class="frame">
      <img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
    </div>
</div>
<!---End of container-->

框架的高度在缩小，但宽度在缩小。 此外，我希望图像在所有四个侧面都扩大，并且框架也要缩小。 除过渡之外，还能通过其他方式实现吗？ 关于如何解决此问题的任何建议或技巧？

Answer 1

只需为img的transform:scale()设置动画，就应该一切就绪。

希望能帮助到你！

  .container { float: left; width: 50%; margin: 0 auto; } .frame { width: 80%; height: 50%; overflow: hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .frame:hover { width: 70%; height: 45%; } .frame > img { width: 100%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .frame:hover img { transform: scale(2); } 

 <div class="frame"> <img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" /> </div>