CODEWITHSUNDEEP
csstransition
DJDMorrison
DJDMorrison

Reputation: 1327

CSS3 Transitions Help

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.

Upvotes: 1

Views: 137

Answers (2)

DuMaurier
DuMaurier

Reputation: 1211

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

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 219938

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/

Upvotes: 1

Related Questions