如何实现与此示例 html/css/js 相同的卡片视图块？

如何解决如何实现与此示例 html/css/js 相同的卡片视图块？

就像这个由 tcoloredBox 的 latex 构建的示例一样。

我的问题是：

如何让Loi image部分的标题根据句子长度进行调整？
如何使标题的位置，仍然是Loi image部分，具有可变位置？纯 css 可以解决这个问题吗？
如果我希望标题句在我点击/悬停标题时改变，我应该怎么做？

好的，我知道数学方程确实是个问题，这里有一篇关于这个问题的新帖子： The new post。

解决方法

类似的东西？

https://codepen.io/seanstopnik/pen/f4482b76c1a6973f0f57b9f606c62e16

/* For demo only */
body {
  padding: 60px;
}

/* Example */
.box {
  position: relative;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
}
.box:not(:last-child) {
  margin-bottom: 40px;
}

.box__title {
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  border-radius: 8px;
  background-color: #000;
  padding: 0 6px;
}

.box__title--top-left {
  top: -52px;
  left: 10px;
}

.box__title--top-right {
  top: -52px;
  right: 10px;
}

.box__title--bottom-left {
  bottom: -52px;
  left: 10px;
}

.box__title--bottom-right {
  bottom: -52px;
  right: 10px;
}

<div class="box">
  <h6 class="box__title box__title--top-left">This is a title</h6>
  <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi,quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>

<div class="box">
  <h6 class="box__title box__title--top-right">This is a title</h6>
  <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi,quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>

<div class="box">
  <h6 class="box__title box__title--bottom-left">This is a title</h6>
  <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi,quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>

<div class="box">
  <h6 class="box__title box__title--bottom-right">This is a title</h6>
  <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi,quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>