[英]On Hover Move The Text Up
所以當你將鼠標懸停在圖像上時,我正試圖向上移動文本,但我似乎無法讓它工作。 我嘗試使用:懸停然后使用padding-bottom移動它但它不起作用。 因此,當您將鼠標懸停在圖像上時,我基本上希望文本“自然”或“孟加拉虎”向上移動。 這是一張圖片,展示了我想要實現的目標。
這是代碼
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;
}
使用top:90px
將文本絕對相對於div.image
元素放置。 在底部添加填充不會改變它,它只會在文本下面添加一些填充。 如果為文本添加可見邊框,則可以看到此內容。
處理此問題的最簡單方法是在鼠標懸停圖像時更改文本的頂部位置。 看到udpated小提琴 。
注意:我只更新了第一張圖片,以便您可以比較這兩個元素以查看差異。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.