關於懸停移動文本

所以我試圖將鼠標懸停在圖像上的文本向上移動，但我似乎無法使其工作。我嘗試使用：懸停，然後使用填充底移動它，但它沒有工作。所以我基本上希望文字「自然」或「孟加拉虎」在你懸停在圖像上時向上移動。這是一張照片，說明我想要達到的目標。關於懸停移動文本

下面的代碼

http://jsfiddle.net/Qf4Ka/10/

HTML

<section id="top-container" class="top-column" style="width:1050px; height:400px; "> 

<div class="image" style="float:left;"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;"> 
<h4 style="font-size:30px; top: 90px; ">Nature</h4> 
</div> 

<div class="image" style="float:left;"><img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; "> 
<h4 style="font-size:30px; top: 90px;">Bengal Tiger</h4> 
</div> 

</section>

CSS

.image { 
    position: relative; 

} 

h4 { 
    position: absolute;  
    width: 100%; 
    color: #fff; 
    float: left; 
    position: absolute;  
    font-size: 40px; 
    font-family: "Oswald"; 
    text-align: center; 
    max-height:auto; 
    z-index:20; 
    text-shadow:1px 1px 2px #000; 
    -moz-text-shadow:1px 1px 2px #000; 
    -ms-text-shadow:1px 1px 2px #000; 
    -o-text-shadow:1px 1px 2px #000; 
    -webkit-text-shadow:1px 1px 2px #000; 

} 

.image { 
    position: relative; 

} 

.image:before{ 
content:''; 
box-shadow:0 0 50px 4px #000 inset; 
-moz-box-shadow:0 0 50px 4px #000 inset; 
-webkit-box-shadow:0 0 50px 6px #000 inset; 
float:left; 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
z-index:20; 
cursor: pointer; 

} 

.image:hover:before { 
    box-shadow:0 0 100px 30px #000 inset; 
    -moz-box-shadow:0 0 100px 30px #000 inset; 
    -webkit-box-shadow:0 0 100px 30px #000 inset; 
    transition: all 1s; 
    -webkit-transition: all 1s; 
}

來源

2013-09-29 John

你應該檢查你的css'position：absolute; float：left; 位置：絕對;' –

怎麼是這樣的：

.image:hover h4 { 
    margin-top: -50px; 
}

FIDDLE

來源

2013-09-29 08:29:10 Danield

文本絕對相對於使用top:90px的div.image元素放置。在底部添加填充不會改變這一點，它只會在文本下方添加一些填充。如果向文本添加可見邊框，則可以看到此內容。

處理此問題的最簡單方法是在鼠標懸停圖像時更改文本的頂部位置。請參閱udpated fiddle。

注意：我只更新了第一張圖片，以便您可以比較兩個元素以查看差異。

來源

2013-09-29 08:50:39 TAS

關於懸停移動文本

回答

相關問題