Html 悬停Div问题和垂直居中文本

我有一个问题，垂直居中的主要文本，我想幻灯片上的主要Lorem Ipsum悬停文本，然后显示/改变颜色的潜文本。请帮我做这个

供参考的图像：

代码：

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

.map top{
背景：灰色；
宽度：100%；
}
.边界权{
右边框：1px实心；
线高：100px；
右边框颜色：rgba（1581581580.33）；
}
.地图文本{
文本对齐：居中；
显示：块；
字体大小：20px；
字体系列：“ProximaNova Bold”；
}
.col-md-3{
显示：表格；
宽度：100%；
边缘底部：-16px；
填充：16px；
框大小：边框框；
}
.col-md-3>span{
宽度：100%；
}
.t-text{
字体大小：16px；
保证金：0；
颜色：透明；
变换：translateY（50px）；
转变：转变；
文本对齐：居中；
身高：0；
线高：0；
}
.hover-e:hover>.t-text{
字体大小：16px；
保证金：0；
颜色：白色；
字体系列：“Merriweather_light”；
转换：translateY（-10px）；
}

乱数假文
Neque porro quisquam est qui
乱数假文
Neque porro quisquam est qui
乱数假文
Neque porro quisquam est qui
乱数假文
Neque porro quisquam est qui
乱数假文
Neque porro quisquam est qui

开始了

.map top{
背景：灰色；
宽度：100%；
}
.边界权{
右边框：1px实心；
线高：100px；
右边框颜色：rgba（1581581580.33）；
}
.地图文本{
文本对齐：居中；
显示：块；
字体大小：20px；
字体系列：“ProximaNova Bold”；
}
div.hover-e.t-text
{
变换：translateY（50px）；
转变：转变；
字体大小：16px；
利润上限：-30px；
颜色：透明；
}
div.hover-e:hover.t-text{
变换：translateY（0）；
利润上限：-30px；
字体大小：16px；
颜色：白色！重要；
字体系列：“Merriweather_light”；
}

Lorem Ipsum
Neque porro quisquam est qui
Lorem Ipsum
Neque porro quisquam est qui
Lorem Ipsum
Neque porro quisquam est qui
Lorem Ipsum
Neque porro quisquam est qui

因此，当您悬停时，您希望向上滑动“Neque porro quisquam est qui”文本。这是你想要的吗？@Maharshi你是对的，我希望“Lorem Ipsum”在div中垂直居中，当我在上面悬停时，它应该向上滑动，“Neque porro quisquam est qui”部分应该显示出来。@ChrisHappy竖起大拇指，我想他也希望“主要文本”也垂直居中。

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