CSS3 Transitions Help

Question

I can't seem to get my head around this but I'm sure it's pretty simple..

Basically I have some text like this: DJDM, which are my initials. What I'm trying to do is to make it so that when you hover over one of the letters, the full name appears next to it using CSS3 transitions. So if you hovered over the D, you would get DanielJDM.

I want the transition to slowly move the rest of the letters over and for the rest of the word to increase in opacity until it's fully visible.

I'm sure theres a way to do this I just can't figure it out right now..

I'd appreciate the help! Thanks.

Answer 1

Here's another example. I didn't use span elements so there's less html. There's also no css styles aside from the bare minimum to get the functionality you're looking for.

http://jsfiddle.net/bGYkB/

html:

<div class="name-container">
    <p>Daniel</p>
    <p>Jiminy</p>
    <p>Daniel</p>
    <p>McLastname</p>
</div>

CSS

.name-container{
    display:block;
    float:left;
}

.name-container p{
    display:block;
    float:left;
    overflow:hidden;
    color:rgba(0,0,0,0);
    width:15px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

.name-container p:first-letter{
    color:rgba(0,0,0,1);
}

.name-container p:hover{
    width:80px;
    color:rgba(0,0,0,1);
}

Answer 2

Here's a solution that is far from perfect (it has a lot of flickering), but should get you started on the right track:

HTML:

<span class="parent"><span class="initial">D</span><span class="full">aniel</span></span>
<span class="parent"><span class="initial">J</span><span class="full">ohn</span></span>
<span class="parent"><span class="initial">D</span><span class="full">avid</span></span>
<span class="parent"><span class="initial">M</span><span class="full">aniel</span></span>

CSS:

body {
    font-size: 30px;
}
span.parent {
    padding: 0 5px;
}
span.full {
    opacity: 0;
    width: 0;
    display: inline-block;
    transition: opacity 0.5s;
    transition: width 0.2s;
}
span:hover span.full {
    opacity: 1;
    width: 50px;
}

http://jsfiddle.net/HjCen/