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

时间:2017-05-17 22:00:22

标签: html css html5 css3

要显示预期效果,请在“餐饮服务”部分的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-->

框架的高度正在缩小,但不是宽度。此外,我希望图像在所有四个边上展开,并且框架也要缩小。这可以用过渡以外的东西来实现吗?关于如何解决这个问题的任何建议或提示?

1 个答案:

答案 0 :(得分:2)

只需为img&#39; transform:scale()制作动画即可。

希望它有所帮助!

&#13;
&#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;
&#13;
&#13;