html - 将鼠标悬停在图片文字上

我想知道是否有人能帮我一把-我会有一些新闻稿图像，当用户悬停在它们上面时，我希望描述文本出现在右边。
我已经用HTML&CSS完成了大部分的工作，但是我不知道如何使它看起来像是文本从图像中滑出（从图像后面）。现在它开始在图像的顶部。而且，它似乎是从左上角开始的，我希望它能滑到右边。
我从来都不擅长CSS的定位！:(
这是我目前的代码：

    #container{
    clear: both;

    top: 40px;
}

.image{

    float: left;

}

#container:hover div.text{
    width: 400px;
    position: relative;
    left:80px;
    top: 10px;
    display: block;

    opacity: 1;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5slinear;
    -ms-transition: all 0.5slinear;
    -moz-transition: all 0.5slinear;
    transition: all 0.5slinear;

}

.text{
        width: 400px;
display: block;
    opacity: 0;
    position: absolute;

    background-color: rgba(0,0,0,0.6);
    color: #f90;
    font-weight: bold;
    line-height: 1.1em;
    -webkit-transition: all 0.5slinear;
    -o-transition: all 0.5slinear;
    -ms-transition: all 0.5slinear;
    -moz-transition: all 0.5slinear;
    transition: all 0.5slinear;


}

    <div id="container">
    <div class="image"><a href="#" target="_blank"><img alt="" src="Newsletter_icon.jpg" height="55px" width="80px"/></a></div>
    <div class="text">This will be some text describing my newsletter...</div>
</div>

<div id="container">
    <div class="image"><a href="#" target="_blank"><img alt="" src="Newsletter_icon.jpg" height="55px" width="80px" /></a></div>
    <div class="text">This will be some text describing my newsletter...</div>
</div>

还有小提琴：http://jsfiddle.net/Lhtvu/

最佳答案

all 0.5slinear中应该有空格。正确的方法是all 0.5s linear。请看这个小提琴：http://jsfiddle.net/Lhtvu/1/