Hi,
I was thinking you wanted text size changing on hover earlier but I wasn’t sure.
As I mentioned you will need to take a different approach for vertically centering in that case. Yes, you will need to use a fixed height on the anchor, but you will need to do it in ems with all font sizes in ems.
Then vertical centering can be done with transform: translateY(-50%); on the h1 (or anchor child). I’m not sure what the reason is for multiple h1’s in those links but I’ll let you work that out.
I got your requirements working below but I had to get out of that bootstrap h1 styling and imitate some of the other bootstrap styles. You will need to merge your bootstrap styles back in accordingly. Anyhow, the example should at least show you how to go about your requirements.
Hope that helps
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
/* Bootstrap Simulations */
* {box-sizing: border-box;}
.container {overflow:hidden;width:80%;min-width:600px;margin:0 auto;padding:0 15px;}
.row {margin:0 -15px;}
.col-md-6 {width:50%; float:left;}
/* misc. resets */
.slidenav h1 {font-size:1em; margin:0;}
/* Slidenav rules */
.slidenav {
margin:0;
padding:0;
}
.slidenav{position:relative;}
.slidenav > div{
padding:0 0 4px;
position:relative;
}
.slidenav > div:hover{z-index:99}
.slidenav > div > a {
display: block;
position: relative;
background: #424549;
text-decoration: none;
color: #999;
border-left: 18px solid #999;
padding: 9px 0; /*9px 0 9px 18px */
overflow: hidden;
font-weight: bold;
height: 6em ;/*fixed height - for vertical centering different font-size*/
margin: 18px 18px 0 18px;
}
.slidenav > div h1 {
font-size:1.25em;
text-shadow:-400px 0 0 #999;
transition:text-shadow .8s ease;
/*vertical centering text*/
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.slidenav > div:hover h1 {
text-shadow: 5px 5px 0 #000;
font-size: 1.75em;/* FZ size of hover text */
/*text-shadow:-300px 0 0 #999; removed this*/
transition:text-shadow .8s ease;
text-align: left;
padding-left:1em;
}
#fz-1, #fz-2, #fz-3, #fz-4, #fz-5 {font-size:1em;} /* if you need 0.5em then adjustments must be made on h1 styles*/
.slidenav > div > a:before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:2;
transition:transform 1s ease;
transform:translateX(-100%);
}
.slidenav > div:hover > a:before {transform:translateX(0);}
/*
.slidenav > div:nth-child(1) > a {border-color: #db0078;}
.slidenav > div:nth-child(2) > a {border-color: #722ba8;}
.slidenav > div:nth-child(3) > a {border-color: #532099;}
.slidenav > div:nth-child(4) > a {border-color: #3f3cad;}
.slidenav > div:nth-child(5) > a {border-color: #005b9a;}*/
#fz-1 > a {border-color: #db0078;} /*text-align center moved to .slidenav > div h1 */
#fz-2 > a {border-color: #722ba8;}
#fz-3 > a {border-color: #532099;}
#fz-4 > a {border-color: #3f3cad;}
#fz-5 > a {border-color: #005b9a;}
/* default sliding colours*//*
.slidenav > div:nth-child(1) > a:before{background:rgba(219, 0, 114, 0.7);}
.slidenav > div:nth-child(2) > a:before{background:rgba(114, 43, 168, 0.7);}
.slidenav > div:nth-child(3) > a:before{background:rgba(83, 32, 153, 0.7)}
.slidenav > div:nth-child(4) > a:before{background:rgba(63, 60, 173, 0.7);}
.slidenav > div:nth-child(5) > a:before{background:rgba(0, 91, 154, 0.7);}*/
#fz-1 > a:before {background:rgba(219, 0, 114, 0.3);} /*opacity was 0.7*/
#fz-2 > a:before {background:rgba(114, 43, 168, 0.3);}
#fz-3 > a:before {background:rgba(83, 32, 153, 0.3)}
#fz-4 > a:before {background:rgba(0, 91, 154, 0.3);}
#fz-5 > a:before {background:rgba(0, 91, 154, 0.3);}
/* if you want color to change on hover then change these 5 rules */
/*
.slidenav > div:nth-child(1):hover > a:before{background:rgba(219, 0, 114, 0.7);}
.slidenav > div:nth-child(2):hover > a:before{background:rgba(114, 43, 168, 0.7);}
.slidenav > div:nth-child(3):hover > a:before{background:rgba(83, 32, 153, 0.7)}
.slidenav > div:nth-child(4):hover > a:before{background:rgba(63, 60, 173, 0.7);}
.slidenav > div:nth-child(5):hover > a:before{background:rgba(0, 91, 154, 0.7);}
*/
@media screen and (max-width:800px){
.slidenav{width:auto; float:none; margin:9px;}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="slidenav col-md-6">
<div id="fz-1">
<a href="#"><h1>Link<br>One</h1></a>
</div>
</div>
<div class="slidenav col-md-6">
<div id="fz-2">
<a href="#"><h1>Link<br>Two</h1></a>
</div>
</div>
</div>
<div class="row">
<div class="slidenav col-md-6">
<div id="fz-3">
<a href="#"><h1>Link<br>Three</h1></a>
</div>
</div>
<div class="slidenav col-md-6">
<div id="fz-4">
<a href="#"><h1>Link<br>Four</h1></a>
</div>
</div>
</div>
</div>
</body>
</html>
