Question

我有一个问题，我想要一些帮助。谢天谢地，我的代码可以灵活，所以我只给出一些通用标记。

我的主要限制（由于我从数据库中检索信息的方式）是图像不能是背景图像，否则这很容易。

当我将鼠标悬停在图片上时，我只想让图片发生变化。我制作的图像是我需要的两倍 - 半色，半黑色和白色。这个想法是，图像完全相同（一个人） - 但是当你将鼠标悬停在它上面时 - 你会看到颜色版本。

我构建了200像素宽，400像素高的'悬停'图像。标记非常简单：

<div class='staff_profile'>
     <h3>Staff Title</h3>
     <div class='staff_image'>
         <img src='.....' alt='....' />
     </div>
</div>

所以我想要的是我需要的东西：

.staff_image {
   float: left;
   height: 200px;
   width: 200px;
}

问题是 - 使用这个，400px高图像默认显示在staff_image div的中心 - 所以我看到一半的黑白照片和一半的颜色。

我将使用jQuery进行悬停 - 所以只需要一些关于我需要使用的属性的CSS提示：

让图像显示在最顶层
从中途显示图像

我尝试使用填充和边距的所有内容似乎都会将所有内容都推下来，并且根本不会移动内部的实际图片。我基本上需要知道如何操纵一个太高的图像，对于固定高度div而言，在该div内。我在这里找到的答案似乎都没有帮助。它们有许多以图像为中心 - 但是居中并不是我想做的事情 - 它恰恰相反！：）

感谢您的帮助。

Answer 1

在这里：http://jsfiddle.net/xqxSK/

<div class='staff_profile'>
     <h3>Staff Title</h3>
     <div class='staff_image'>
         <img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
     </div>
</div>

.staff_image {
    overflow: hidden;
    height: 200px;
}
.staff_image img {
    position: relative;
}

.staff_image:hover img {
   top: -200px;
}

我正在使用CSS代替jquery进行悬停。这是一种更好的方法，因为它在触摸屏设备上效果更好。

将图像垂直放置在div内

1 个答案: