Max Power Max Power - 3 months ago 6x
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.

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


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