懸停事業部發行和垂直中心文字

我有垂直居中的主文本的問題，我想向上滑動懸停主要Lorem存有文本，然後顯示/潛臺詞的變色。請幫我解決一下這個。參考懸停事業部發行和垂直中心文字

代碼：

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

來源

2017-01-19 Zed

所以，你要當你徘徊向上滑動「普羅預期值，也EST quisquam歸仁」的文字。你想要嗎？ – Maharshi

@Maharshi你說得對，我希望「Lorem存有」以在div垂直居中，當我在它懸停，它應該向上滑動和「普羅預期值，也EST quisquam魁」部分應該顯示。 – Zed

https://jsfiddle.net/tk0waoku/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>

來源

2017-01-19 05:18:55

這裏有雲

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

來源

2017-01-19 05:40:14 Maharshi

我想他會喜歡「正文」，以垂直居中爲好。 –

懸停事業部發行和垂直中心文字

回答

相關問題