Sliding hover text alignment

Hi
On this question Paul addressed the duplicate content.

Now I am trying to adapt it to buttons which have/had the duplicate content issue, and was able to make the changes needed save one feature:
The sliding font size, and its alignment:
the top four have smaller font size, and centered (both horizontally and vertically), with the sliding (hover) text bigger, and left aligned, whereas the bottom four (new single content) sliding are larger, and left aligned, while the button is not vertically centered.
Test page:
ttri dot biz/fz_test/07

Thank you

1 Like

Hi,

I’m not sure, but I think I know what your trying to accomplish.

The h1 tag you have nested in the anchor of the bottom four is picking up it’s styles from here on line 8 of style-1 css.

.page-section h1{font-size:3em;font-weight:900;color:#fff;margin:0 0 30px 0;text-shadow:2px 2px 2px #000;}

That is causing several conflicts in your .slidenav rules

  1. The font-size is causing the jump on hover because of different font sizes
  2. It is keeping the text un-centered vertically and causing you to try resolve the issue by using a fixed height:90px; on .slidenav > div > a
  3. The text-shadow on the h1 is overriding your :hover text-shadow rules and killing the duplicate text effect you are after

There is no real reason for each anchor to contain an h1 heading tag, just by eliminating that h1 and/or it’s styles will get you headed in the right direction.


Then remove the left 18px padding from here to center up text horizontally, while there go ahead and remove the 90px fixed height. Let the font-size and top/bottom paddings set the height they need.


.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: 90px; removed this*/
	margin: 18px 18px 0 18px;
}

After doing that I noticed the duplicate text created by text-shadow needed a little more left indention to hide it, since text is centered in this case.

.slidenav > div > a {text-shadow:-400px 0 0 #999; transition:text-shadow .8s ease;}

Let us know if that gets things headed in the right direction.

If I am misunderstanding, and you are intentionally wanting the font-size to change on hover then you will need to take a different approach for vertically centering it.

I see three different selectors having an effect on the font-size…


.page-section h1{font-size:3em;font-weight:900;color:#fff;margin:0 0 30px 0;text-shadow:2px 2px 2px #000;}

.slidenav > div:hover > a {
	text-shadow: 2px 2px 0 #000;
	font-size: 1.5em;/* FZ size of hover text */
	/*text-shadow:-300px 0 0 #999;  removed this*/
    transition:text-shadow .8s ease;
}
#fz-1, #fz-2, #fz-3, #fz-4, #fz-5 {font-size:0.5em;}

Oh yeah, you will see where I had to remove the second text-shadow rule on div:hover > a , that belongs on .slidenav > div > a but use -400px instead.

Thank you.

I think I did not explain very well.
I am trying to achieve the same effect of the top four buttons, with the sliding (on hover) not only for the background color, but also the text, which besides smoothly sliding in, has bigger size font, and left aligned; whereas the button when not hovered has smaller font, and center aligned.
The left colored 18px border is just an enhancement.

Removing the height would make the button higher on hover due to the .page-section h1 setting, I tried changing the h1 margin, but then other issues kick in.

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>

1 Like

Thank you.
Bootstrap is not an issue, in the context, once I get the buttons behave as desired.

I’m not sure what the reason is for multiple h1’s in those links but I’ll let you work that out.

If you are referring to the top four ones, I guess it was for having the text stay there centered, while the sliding occurs, and the background would dim it off while the sliding hover would kick in and be bigger; which effect is what I am trying to accomplish.

I played with the code you gave, and haven’t yet been able to do so, as the text (main) would “jump” to the left, while background color, and shadow kick in.
From my limited understanding I guess it can’t be done, meaning to have the main centered text (before hovering) stay centered, and visible, while the sliding background with text kicks in?

Hi,
So you want the main text to stay centered at all times, then have the duplicate text slide in and stay to the left. Just like the top four links from your example are doing? (Edit: I see where you mention that in your 1st post now. My misunderstanding)

It could be possible to stagger the text-shadow (that’s the duplicate text effect) off to the left. But with a fluid width link like it is, I think it would be using ‘magic numbers’ to find a stopping point at the left side. That stopping point may be different when the link is wider on wider screens. Different amounts of text (characters) would complicate that too.

Next issue would be the font-size. Values for the text-shadow property only set the offsets, color, and blur. It’s font-size can’t be larger than the element it’s attached to.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

When I was following along in your other thread I know that Paul used the text-shadow to eliminate the duplicate content from the html. And for good reason, google would not like it either.

It could be possible to duplicate your text using the content: " "; property on pseudo :before or :after. That would allow you to change font-size and set it to the left.

Could be a pain setting it up in the CSS though. You would have to set different content values by using the ID’s you have on your inner divs.

I’ve got a mental picture of it, I’ll see if I can pull it off and post back.

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

Thank you.
By tweaking it I got the desired result, to be tested in various screen sizez, but it’s a good start.

I have one question:
What is the difference, and why, between “link \A” and" \00A0 link \A"
content:“Link \A One”;
content:“Link \A Two”;
content:“\00A0 Link \A Three”;
content:“Link \A Four”;

I made a few changes:

Removed
margin: 18px 18px 0 18px;
from
.slidenav > div > a
as I noticed it would trigger the link action outside the grey button, I put the margin in
#fz-1, #fz-2, #fz-3, #fz-4, #fz-5 {font-size:1em;margin:9px;}

Added
line-height:1.1;
to
.slidenav > div > a:before
for better dimensioning, and centering the sliding text, for that I played with the font-size, and padding as well, and based on the font size the padding needs to be tweaked.

I did changed/added some color, and text-shadow, but that is just about the “look”.

Can be seen at ttri dot biz/fz_test/09/

1 Like

That’s what I was talking about in post #8. It is a workaround for not being able to use text-align center, which would have placed the pseudo text on top of the main text.

\00A0 is the html equivalent of a non-breaking space: &nbsp;
If you remove it from link three you will see the text be left aligned.

It was used to help center “Link” above “Three”, things would get worse if you have a long word with a short word. That’s what I meant by…“awkward working with the pseudo text”, when using line breaks.

The pseudo text may look better being left-aligned since it looks like you want it snugged up to the left border. In that case, just use \A for your line breaks.

Yes, it was all just a rough draft of the concept you were after. I knew you would be able to fine tune it to your liking.

Thank you for the clarification, I had missed that.

Yes, it was all just a rough draft of the concept you were after. I knew you would be able to fine tune it to your liking.

Yes I knew that, I just post it for others who might stumble on this post.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.