Question

要显示预期效果，请在“餐饮服务”部分的site底部附近，将鼠标悬停在三张图片上。

我希望我的图像在悬停时放大 - 增加高度和宽度 - 同时它周围的框架缩小，溢出：隐藏的路径。

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

<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＆＃39; transform:scale()制作动画即可。

希望它有所帮助！

＆＃13;

  .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);
  }

＆＃13;

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

＆＃13;

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

1 个答案: