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.

What do you have so far? You can show us here: http://jsfiddle.net/ — thirtydot, Sep 08 '11 at 19:45

score 1 · Answer 1 · answered Sep 08 '11 at 20:04

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/

score 1 · Accepted Answer · answered Sep 08 '11 at 20:26

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);
}

That is a brilliant use of :first-letter! I never thought of that! Thanks for the great reply. — DJDMorrison, Sep 08 '11 at 20:56

CSS3 Transitions Help

2 Answers2