Sliding hover text alignment

HTML & CSS
8

It’s kinda awkward working with the pseudo text, but it can be done. I could not use text-align:center; to line up the text when line breaks are used. Had to use encoded \00A0 (&nbsp) to get close at centering.

<!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 */
    transition:text-shadow .8s ease;
    /*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:""; /*overrides are in ID's below*/
    font-size: 1.8em;
    padding: .45em 0 0 .75em;
    white-space: pre;
    /*content text styles above*/

    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); content:"Link \A One";}   /*opacity was 0.7*/
#fz-2 > a:before {background:rgba(114, 43, 168, 0.3); content:"Link \A Two";}
#fz-3 > a:before {background:rgba(83, 32, 153, 0.3); content:"\00A0 Link \A Three";}
#fz-4 > a:before {background:rgba(0, 91, 154, 0.3); content:"Link \A Four";}
#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>
1 Like
Font awesome and text in pseudo class