CODEWITHSUNDEEP
htmlcssanimationcss-animations
Sheixt
Sheixt

Reputation: 2626

CSS link hover animation

I am attempting to replicate the the animation that Codrops have here. (example 11, on the blue background).

I've followed their CSS however I am getting a strange result, the text stacks and doesn't appear correctly on hover. You can see it happening in this JSFiddle.

Just for reference here is the HTML:

<div id="content" class="small-12 columns the-posts">
    <article id="post-162" class="post-162 post type-post status-publish format-standard hentry category-uncategorized row">
        <a href="http://localhost/pondera_v3/uncategorized/test-post-6/" rel="bookmark" title="Test Post 6" class="post-title" data-hover="Test Post 6">Test Post 6</a>
    </article>
</div>

And here is the CSS:

.the-posts article a.post-title {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-family: arial, helvetica;
    text-decoration: none;
    font-size: 29px;
}
.the-posts article a.post-title::before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    max-width: 0;
    color: #86a63e;
    content: attr(data-hover);
    -webkit-transition: max-width 0.5s;
    -moz-transition: max-width 0.5s;
    transition: max-width 0.5s;
}

.the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before {
    max-width: 100%;
}

I've played with the overflow but the solution is alluding me! Can someone point out where I am going wrong?

Upvotes: 0

Views: 1798

Answers (4)

DaniP
DaniP

Reputation: 38252

You can add a max-height that way the overflow line also is hidden:

.the-posts article a.post-title::before {    
  max-height:29px;
}

View the demo http://jsfiddle.net/abnUE/2/

EDIT

Now to fix the problem of your comment. ADD this css instead on the max height.

.the-posts article a.post-title::before {    
  height:0;
}

And in the hover :

.the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before {
height:100%;
}

New Demo http://jsfiddle.net/abnUE/7/

Upvotes: 4

Keeley Carrigan
Keeley Carrigan

Reputation: 21

Just add this to your anchor. That's the way the original is doing it.

overflow:hidden;

http://jsfiddle.net/csh8F/1/

Upvotes: 0

Luke
Luke

Reputation: 156

Same basic answer as both Danko & Felipe, except I used

max-height: 1em;

and had to add it to both ".the-posts article a.post-title" & ".the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before" because when I stopped hovering it had the same issue as before with the text appearing below as it went away.

EDIT: I see my error, I started by adding to the wrong CSS first. Adding to just the ".the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before" fixed the issue on initial hover but still had an issue when you stopped hovering. Just adding to ".the-posts article a.post-title" fixed it for both.

Upvotes: 0

Felipe Miosso
Felipe Miosso

Reputation: 7339

Add height:29px; inside .the-posts article a.post-title::before

http://jsfiddle.net/felipemiosso/abnUE/3/

Upvotes: 0

Related Questions