在悬停 div 问题上并垂直居中文本

Question

我在垂直居中正文时遇到问题，我想在悬停时向上滑动主 Lorem Ipsum 文本，然后显示/更改潜文本的颜色。请帮我解决这个问题。

供参考的图片 ： https://i.stack.imgur.com/OQlbd.jpg

法典：

<section id="contact" class="map-top">
    <div class="row map-text">
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui</p> </div>
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui</p> </div>
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui </p> </div>
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui</p> </div>
</div>
</section>

.CSS：

.map-top{
  background: gray;
  width:100%;
}
.border-right{
border-right: 1px solid;
line-height: 100px;
border-right-color: rgba(158, 158, 158, 0.33);
}
.map-text{
    text-align: center;
    display: block;
    font-size: 20px;
    font-family: "ProximaNova-Bold";
  }
.t-text{
  font-size: 16px;
  margin-top: -30px;
  color: transparent;
}
.t-text:hover{
  font-size: 16px;
  margin-top: -30px;
  color: white;
  font-family: "Merriweather_light";
}

https://jsfiddle.net/tk0waoku/1/

Answer 1

来了

.map-top{
  background: gray;
  width:100%;
}
.border-right{
border-right: 1px solid;
line-height: 100px;
border-right-color: rgba(158, 158, 158, 0.33);
}
.map-text{
    text-align: center;
    display: block;
    font-size: 20px;
    font-family: "ProximaNova-Bold";
  }
div.hover-e .t-text
{
  transform: translateY(50px);
  transition: transform .4s;
  font-size: 16px;
  margin-top: -30px;
  color: transparent;
}
div.hover-e:hover .t-text {
  transform: translateY(0);
   margin-top: -30px;
   font-size: 16px;
  color: white !important;
  font-family: "Merriweather_light";
}

<section id="contact" class="map-top">
    <div class="row map-text">
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui</p> </div>
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui</p> </div>
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui </p> </div>
  <div class="col-md-3 border-right hover-e">Lorem Ipsum <p class= "t-text">Neque porro quisquam est qui</p> </div>
</div>
</section>

Answer 2

JSfiddle

.map-top {
  background: gray;
  width: 100%;
}
.border-right {
  border-right: 1px solid;
  line-height: 100px;
  border-right-color: rgba(158, 158, 158, 0.33);
}
.map-text {
  text-align: center;
  display: block;
  font-size: 20px;
  font-family: "ProximaNova-Bold";
}
.col-md-3 {
  display: table;
  width: 100%;
  margin-bottom: -16px;
  padding: 16px;
  box-sizing: border-box;
}
.col-md-3 > span {
  width: 100%;
}
.t-text {
  font-size: 16px;
  margin: 0;
  color: transparent;
  transform: translateY(50px);
  transition: transform .4s;
  text-align: center;
  height: 0;
  line-height: 0;
}
.hover-e:hover > .t-text {
  font-size: 16px;
  margin: 0;
  color: white;
  font-family: "Merriweather_light";
  transform: translateY(-10px);
}

<section id="contact" class="map-top">
  <div class="row map-text">
    <div class="col-md-3 border-right hover-e"><span>Lorem Ipsum </span>
      <p class="t-text">Neque porro quisquam est qui</p>
    </div>
    <div class="col-md-3 border-right hover-e"><span>Lorem Ipsum </span>
      <p class="t-text">Neque porro quisquam est qui</p>
    </div>
    <div class="col-md-3 border-right hover-e"><span>Lorem Ipsum </span>
      <p class="t-text">Neque porro quisquam est qui</p>
    </div>
    <div class="col-md-3 border-right hover-e"><span>Lorem Ipsum </span>
      <p class="t-text">Neque porro quisquam est qui</p>
    </div>
    <div class="col-md-3 border-right hover-e"><span>Lorem Ipsum </span>
      <p class="t-text">Neque porro quisquam est qui</p>
    </div>
  </div>
</section>