Max Power Max Power - 4 months ago 13
CSS Question

increasing width on hover, on a square padding-top:100% div

I'm trying to increase the width of a div on hover while the height stays the same. This is tough because I get the height from padding-top: 100% which allows it to be a resizable square. So naturally as I increase the width the height organically increases too. (It is important the div height and width are equal in its normal state so it's a perfect square)

I'm now lost and unsure how to achieve this, any input is appreciated.

https://jsfiddle.net/9tc2mbwd/2/

.work-container { padding-top: 100%; }

Answer

If you don't want to set fix width and height into .work-wrapper, then.. Make the .work-container the hovered element, and do like this:

.work-wrapper {
 width: 30%;
}
.work-container {
  padding-top: 100%;
  width: 100%;
  transition: all ease 0.5s;
}
.work-container:hover {
  width: 200%;
}
.work-1 {
  background-color: #FEF102;
}
<div class="work-wrapper">
    <div class="work-container work-1">
    </div>
</div>