CODEWITHSUNDEEP
htmlcss
Vikrant Singh
Vikrant Singh

Reputation: 82

Using css transitions to create a specific zoom-in effect

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?

Upvotes: 1

Views: 14455

Answers (1)

Rich
Rich

Reputation: 3336

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>

Upvotes: 3

Related Questions