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

Question

For visualization of the intended effect, go near the bottom of this site , at the "Catering Services" section, and hover over the three images.

I want my images, on hover, to zoom-in -- increase in height and width -- while the frame around it shrinks, with overflow:hidden ofcourse.

Here's what I have written so far:

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

The height of the frame is shrinking but not the width. Moreover, I want the image to expand on all four sides, and the frame to shrink likewise. Can this be achieved with something other than transitions? Any suggestions or tips on how should I go about solving this?

Answer 1

Just animate the img's transform:scale() and you should be all set.

Hope it helps!

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