CODEWITHSUNDEEP
htmlcsswebkitcss-transitions
user783322
user783322

Reputation: 481

CSS transition with fixed bottom growing outwards

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

Upvotes: 2

Views: 1923

Answers (2)

Shaggy
Shaggy

Reputation: 6796

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>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371539

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:

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

Upvotes: 1

Related Questions