Q:

How to make text appear after slide in image transition on hover

I am attempting to make header text and body text appear (fade in) under the right side of an image that slides in after the mouse hovers over it. 
I am currently using this code I have found and it gives me the effect on the image I want but I don't know how to add in the text.
Here is a link to where I found the image effect if you'd like to see it working:
http://jsfiddle.net/2vLjU/13753/
When you mouse over the black square it extends and under the right side is where I want the text to go.
Any help is much appreciated.
Thanks!
**HTML:**

<a href="">
<div class="wrapper">
    <img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100- 4.jpg" />
</div>
</a>

**CSS:**

    .wrapper {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 100px; 
    border: 0px solid black;
}

#slide {
    position: absolute;
    left: -300px;
    width: 400px;
    height: 100px;
    background: black;
    transition: 1s;
}

.wrapper:hover #slide {
    transition: .5s;
    left: 0;
}

A:

HTML
<div class="wrapper">
<div class='slide'></div>
</div>
<div class="wrapper">
<div class='slide'></div>
</div>

CSS
.wrapper {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 100px; 
    border: 0px solid black;
}

.slide {
    position: absolute;
    left: -300px;
    width: 400px;
    height: 100px;
    background: black;
    transition: 1s;
    color: white;
    padding: 20px;
}

.wrapper:hover .slide {
    transition: .5s;
    left: 0;
}

JQUERY
$('.slide').on('mouseenter', function () {
$('.inner_text').remove();
$(this).append("<a class='inner_text'>HELLO THERE</a>")
})

RESULT

****** * * * * * * EDIT * * * * * * ********
If you want to have the text outside the black boxes, filling the space where the non-hovered box is, just change your jQuery to:
$('.slide').eq(0).on('mouseenter', function () {
$('.inner_text').remove();
$(this).parent().parent().append("<a class='inner_text'>HELLO THERE</a>")
$('.inner_text').css('margin-left', '290px')
$('.inner_text').css('margin-top', '-98px')
$('.inner_text').css('position', 'fixed')
})

$('.slide').eq(1).on('mouseenter', function () {
$('.inner_text').remove();
$(this).parent().parent().append("<a class='inner_text'>HELLO THERE</a>")
$('.inner_text').css('margin-left', '290px')
$('.inner_text').css('margin-top', '-120px')
$('.inner_text').css('position', 'fixed')
})

$('.slide').on('mouseleave', function () {
$('.inner_text').remove();
})

RESULT:

You can adjust the positioning of the text if it's not sitting where you want. 

