悬停时在图像过渡中滑动后如何显示文本

Question

我试图将标题文本和正文文本显示（淡入）在鼠标悬停后滑入的图像的右侧下方。

我目前正在使用发现的这段代码，它可以使我对想要的图像产生效果，但是我不知道如何在文本中添加。

如果您想查看图像效果，请在此处找到我的图像效果链接： http://jsfiddle.net/2vLjU/13753/

当您将鼠标悬停在黑色方块上时，它会延伸，并且在右侧下方是我要放置文本的位置。

非常感谢您的帮助。

谢谢！

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

Answer 1

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

结果

****** * * * * * *编辑* * * * * * ********

如果您想在黑框外放置文本，填充未悬停的框所在的空间，只需将jQuery更改为：

$('.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();
})

结果：

如果文本不在您想要的位置，您可以调整文本的位置。