html - 如何使悬停文本适合框？使用布尔玛

Question

编解码器

我试图让出现在悬停上的文本完全显示在框中。1) 具有内容的悬停效果，2) 使用关卡/关卡项目，以及 3) 希望在框内创建相等的垂直居中的混合使这有点复杂。下面是文本如何向右溢出的屏幕截图。请注意，我必须使用纯 CSS 来实现这一点。

目前我有以下代码：

.hover-box {
  width: 100%;
  height: 10rem;
  background-color: blue;
}

.showme {
  display: none;
  transition: all 2s ease;
  vertical-align: middle;
}

.hover-box:hover .showme {
  display: inline;
}

.hover-box:hover .ok {
  display: none;
}

<div class="columns has-text-centered">
  <div class="column is-paddingless border height">
    <div class="level hover-box has-text-centered">
      <div class="level-item">
        <p class="showme is-size-5 has-text-white has-text-centered">State the purpose and importance of conversation</p>
        <p class="ok is-size-1 has-text-white title is-uppercase">Open</p>
      </div>
    </div>
  </div>