将鼠标悬停在图片文字上滑出

我想知道是否有人可以给我一只手 - 我会收到一些简报图片，当用户将鼠标悬停在它们上面时，我希望描述文字显示在右侧。将鼠标悬停在图片文字上滑出

我已经设法使用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/

来源

2014-01-07 Mike

得到它的工作几乎完全一样，我想它。感谢下面的答案。更新的小提琴：http://jsfiddle.net/Lhtvu/4/ – Mike

得到它的工作几乎完全一样，我想它。感谢下面的答案。更新小提琴：jsfiddle.net/Lhtvu/4

来源

2014-01-07 10:36:15 Mike

哈，正是我在小提琴秒前尝试做的...... :) –

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

来源

2014-01-07 10:13:07 Zword

够公平:)但是，它仍然没有做到我想要它做的。问题可能不够清楚。我如何让它看起来好像文字是从图像后面出来的？目前它从图像前面的左上角开始滑动。 – Mike

有些东西在Firefox中效果不佳... – fiskolin

你犯了2错误：

One：all 0.5slinear应该是all 0.5s linear。

两个：你需要默认定位设置为div.text使其滑动，这样的：left:0px;它。

见Fiddle

来源

2014-01-07 10:17:03

在这里，它已被问过。看看这个小提琴并重构你的CSS和HTML代码。

它工作到完美。

HTML

<div id="contain"> 
    <div class="fake-image"></div> 
    <div class="text">some text</div> 
</div>

CSS

#contain{ 
    clear: both; 
} 

.fake-image{ 
    width: 100px; 
    height: 100px; 
    background-color: aqua; 
    float: left; 
    margin-right: 14px; 
    cursor: pointer; 
} 

#contain:hover div.text{ 
    display: block; 
} 

.text{ 
    background-color: yellow; 
    float: left; 
    display: none;  
}

DEMO

来源

2014-01-07 11:00:33

将鼠标悬停在图片文字上滑出

回答

相关问题