html - 在悬停时增加宽度，在正方形填充顶部 :100% div

Question

我试图在悬停时增加 div 的宽度，同时高度保持不变。这很难，因为我从 padding-top: 100% 得到了高度，这让它成为一个可调整大小的正方形。所以很自然地，当我增加宽度时，高度也会自然地增加。 (重要的是 div 高度和宽度在正常状态下是相等的，所以它是一个完美的正方形)

我现在迷路了，不确定如何实现这一点，欢迎任何意见。

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

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

Answer 1

如果您不想在 .work-wrapper 中设置固定宽度和高度，那么..使 .work-container 成为悬停元素，然后这样做:

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