如何使悬停文本适合框内？使用Bulma

Question

CODEPEN

我试图让悬停时显示的文字完全显示在框内。 1）具有悬浮效果和内容的混合物，2）使用水平/水平项目，以及3）想要在盒子内创建相等的垂直居中，这使得这有点复杂。下面是文本如何向右溢出的屏幕截图。请注意，我必须使用纯CSS实现此目的。

目前我有以下代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;