A Way to Change Text After Transition Completes?

Dear Stackoverflow readers,

Using only CSS3 , is there any way to change the text of a div after the transition is completed?

My code snippet can be viewed here:

HTML

<div class="biography">
    <p>Hover For Player Info</p>
</div>

CSS3

.biography {
    width: 100px;
    height: 60px;
    float: left;
    margin: 5px;
    background: #3399FF;
    color: #ffffff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    right: 5%;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    opacity: 0.4;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}
.biography:hover {
    width: 350px;
    height: 450px;
    margin: 10px 10px 0px -200px;
    opacity: 1;
    background: #7C7C7C;
}

JSFiddle

After the transition, I want to change "Hover For Player Info" to "Player Info".

Continuing on that, I need it to change back to "Hover For Player Info" once the mouse is no longer hovering over the div.

If there's no possible way, what skills do I need to learn to achieving what I want?

Thanks in advance!

Problem courtesy of: Tony

Using jQuery:

$('.biography').hover(function(e) {
    $(this).html('Player Info');
}, function(e) {
    $(this).html("Hover for Player Info");
});

JSFiddle Demo

Solution courtesy of: Faiz Ahmed

@Tony Hello again. :) I hope your project is going well.

@Faiz has given you a good solution, but it changes the text on hover, not when the animation is complete (as you asked for in your original question). If his solution works for you, awesome; if you still want the text to change when the transition is complete, here's the code for that below and here's a working jsFiddle based off the one Faiz gave above.

$('.biography').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
    if ($(e.target).css('opacity') == 1) { // or any other style from the "hover" form
        $(".player-info-msg").html('Player Info');
    } else {
        $(".player-info-msg").html('Hover for Player Info');
    }
});

Let me know if you have any problems if you decide to implement this, and let me know if you have any further questions.

EDIT: If you want to read up more on this event, see the Mozilla docs . If you want to know more about jQuery, Javascript, etc. all of the resources @Faiz gave you are great.

Discussion courtesy of: Ryan Mitchell

This can be done in CSS alone using :after :

.biography:after{
    content:'Hover for player info';
}
.biography:hover:after{
    content:'Player Info';
}

Discussion courtesy of: Jacob Gray