Slide effect when text is hover

Question

I'm having trouble figuring out how to do a simple slide effect.

the simple animation is the word "The Wordpress blog post excerpt" will slide from the left to right when the word "The wordpress blog post Title" is in hover state.

you can see my complete code here in my js fiddle

http://jsfiddle.net/Kareen/emP65/3/

    <div class="item">
    <div class="blockdiag">
        <div class="blockradial">
            <h1>The wordpress blog post Title</h1>
            <div class="excerpt">
                The Wordpress blog post excerpt
            </div>
        </div>
    </div>
</div>

A simple javascript will do the job but unfortunately, i have no knowledge with it. can someone help me code?

Answer 1

You wouldn't need JavaScript for this, just change the position of the element when hovering over the parent element. Then throw in some transition properties on the .excerpt element.

UPDATED EXAMPLE HERE

.excerpt {
    left:-400px;
    position:relative;
    transition:all 2s;
    -webkit-transition:all 2s;
}
.item:hover .excerpt {
    left:0px;
}

Alternatively, if you want the transition to take place when hovering over the previous h1 element:

EXAMPLE HERE

h1:hover + .excerpt {
    left:0px;
}