使用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>