將鼠標懸停在圖片文字上滑出

我想知道是否有人可以給我一隻手 - 我會收到一些簡報圖片，當用戶將鼠標懸停在它們上面時，我希望描述文字顯示在右側。將鼠標懸停在圖片文字上滑出

我已經設法使用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

將鼠標懸停在圖片文字上滑出

回答

相關問題