0

因此，当您将鼠标悬停在图像上时，我试图将文本向上移动，但我似乎无法使其正常工作。我尝试使用 :hover 然后使用 padding-bottom 将其向上移动，但它没有用。因此，当您将鼠标悬停在图像上时，我基本上希望文本“自然”或“孟加拉虎”向上移动。这是一张图片，说明了我想要实现的目标。

这是代码

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;
}
4

2 回答 2

2

像这样的东西怎么样：

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

小提琴

于 2013-09-29T08:29:10.243 回答
0

使用 .绝对相对于div.image元素放置文本top:90px。在底部添加填充不会改变这一点，它只会在文本下方添加一些填充。如果为文本添加可见边框，您可以看到这一点。

处理此问题的最简单方法是在鼠标悬停图像时更改文本的顶部位置。请参阅更新的小提琴。

注意：我只更新了第一张图片，以便您可以比较两个元素以查看差异。

于 2013-09-29T08:50:39.047 回答