html - 关于Hover Div问题和垂直居中文本

Question

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

引用图片:/image/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>