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

Question

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

图片供参考：http://imgur.com/a/fnmrs

代码：

<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

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>

Answer 2

这就是

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