CSS transition with fixed bottom growing outwards

Question

I have an icon and I want it to grow when rolled over.

I want this icon to proportionately expand upwards, left and right, so its bottom center position needs to remain fixed where it starts.

I want to use pure CSS for this, no JS.

I can get it to expand in various ways, but all of them make the whole thing move upwards or downwards.

Here's where I'm at with it, any help will be greatly appreciated.

#sm-image {
  width: 20px;
  height: 20px;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#sm-image:hover {
  width: 36px;
  height: 36px;
  top: -10px;
  left: -10px;
  bottom: 0;
  margin-right: -10px;
  margin-bottom: 0;
}

<img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg"></img>
<div style="width:100%;background-color:red;height:2px;"></div>

Thanks in advance.

JSFiddle

score 1 · Accepted Answer · edited May 23 '17 at 11:53

You may want to consider absolutely-positioning the icon and wrapping it in a relatively-positioned container. Here's the basic framework:

#icon-container {
  width: 36px;
  height: 36px;
  border: 1px dashed red;
  position: relative;            /* 1 */
}
#sm-image {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;                      /* 2 */
  left: 50%;                      /* 3 */
  transform: translateX(-50%);    /* 4 */
  transition: width .5s, height .5s;
}
#sm-image:hover {
  width: 36px;
  height: 36px;
}

<div id="icon-container">
  <img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg">
</div>
<div style="width:100%;background-color:red;height:2px;"></div>

https://jsfiddle.net/aub9amy0/3/

Notes:

establish bounding box (nearest positioned ancestor) for absolutely positioned child
keep icon fixed to the bottom of container
keep icon horizontally centered in container
horizontal centering fine-tuning

For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. — Michael Benjamin, Dec 23 '16 at 18:29

Shaggy · Answer 2 · 2016-09-09T18:59:47.213

Rather than changing the width & height and trying to reposition the element in the process, you could use the scale() transform-function and set the transform-origin to be the bottom centre.

#sm-image{
  width:20px;
  height:20px;
  transform-origin:50% 100%;
  transition:transform .5s;
}
#sm-image:hover{
  transform:scale(1.25);
}

<img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg">
<div style="width:100%;background-color:red;height:2px;"></div>

CSS transition with fixed bottom growing outwards

2 Answers2