Animation in css3

Question

I just created an css3 animation and I have a problem. When I hover over my text, above appear a line and everything may have to be great, but I don't know how to move this line at the bottom of text. I've trying with transform:translateX but it does not help.

There is my code:

.line
{
font-family:Tahoma;
width:0px;
height:1px;
background:black;
transition:width 0.4s ease ;
-moz-transition: 0.4s ease ; /* Firefox 4 */
-webkit-transition: 0.4s ease ; /* Safari and Chrome */
-o-transition: 0.4s ease; /* Opera */

}

div:hover

{

width:85px;

}

http://jsfiddle.net/DashDesign/SD58Z/1

Christoph · Accepted Answer · 2013-03-19 07:59:59Z

1

Move the inner div one pixel to the top, give it an opaque background and remove the height restriction from the parent div.

.line div{
    background:#fff;
    position:relative;
    bottom:1px;
}

Example

answered Mar 19, 2013 at 7:59

Christoph

51.4k22 gold badges102 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Animation in css3

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related