CSS问题（无浮动图像），带有灰度jquery插件和简单的jquery函数

我正在使用greyscale jquery插件动态地对图像进行灰度化（由Andrew Pryde编写）

effetc就像一个魔咒：

但我尝试添加另一个jquery函数：在翻滚时在图像上显示信息

该功能单独工作，但与插件我有一个css问题。图像不再浮动：

你能帮我找出css中的错误吗

源代码（css、html、jquery在示例中很容易找到）

---

多谢各位

我认为您需要做的就是将以下代码放入CSS中

.imgHover {
  position: relative;
  display: inline-block;
}

---

图像悬停div显示为“block”，因此它们胜过gsWrapper CSS。

我认为您需要做的就是将以下代码放入CSS中

.imgHover {
  position: relative;
  display: inline-block;
}

---

图像悬停div显示为“block”，因此它们胜过了gsWrapper CSS。

这是因为您在block元素中使用了标题来包装图像，而block元素跨越了图像容器的整个宽度

float

应用于灰度图像，而不是它们的父元素，因此即使所有图像都是浮动的，它们也不再是彼此的兄弟；他们是气垫包装器的兄弟姐妹

图像仍然是浮动的，但它们单独在容器（包装器）中，包装器不会浮动

您可以添加悬停标题而不使用任何JS：只需将标题作为另一个元素添加到每个

.gsWrapper

元素中，并将其样式设置为在悬停时显示即可

简化示例：

<div class="gsWrapper">
  <img class="img_mosaique_cat_projets noir_blanc" src="img/sj-concelles/220x168.jpg" alt="titre projets">
  <canvas class="gsCanvas" height="168" width="220" style="left: 0px; position: absolute; top: 0px;"></canvas>

  <div class="hide-hover">test content for hover</div>
</div>

这样，您就不必担心调整所有其他样式和JS以适应某些图像周围的包装

其他演示：使用jQuery幻灯片切换效果隐藏/显示字幕：

---

使用纯CSS实现滑动切换效果：

这是因为您在块元素中用标题包装了图像，块元素跨越了图像容器的整个宽度

float

应用于灰度图像，而不是它们的父元素，因此即使所有图像都是浮动的，它们也不再是彼此的兄弟；他们是气垫包装器的兄弟姐妹

图像仍然是浮动的，但它们单独在容器（包装器）中，包装器不会浮动

您可以添加悬停标题而不使用任何JS：只需将标题作为另一个元素添加到每个

.gsWrapper

元素中，并将其样式设置为在悬停时显示即可

简化示例：

<div class="gsWrapper">
  <img class="img_mosaique_cat_projets noir_blanc" src="img/sj-concelles/220x168.jpg" alt="titre projets">
  <canvas class="gsCanvas" height="168" width="220" style="left: 0px; position: absolute; top: 0px;"></canvas>

  <div class="hide-hover">test content for hover</div>
</div>

这样，您就不必担心调整所有其他样式和JS以适应某些图像周围的包装

其他演示：使用jQuery幻灯片切换效果隐藏/显示字幕：

---

使用纯CSS实现幻灯片切换效果：

谢谢您的回复。我已经尝试添加你的css代码，但我仍然有一个问题：图像在“悬停”上移动。然后我会尝试Tuff的答案。这有点复杂，他似乎比我做了更多的分析。非常感谢布莱恩的帮助。当我尝试这个插件时，它比我期望的更复杂。谢谢你的回复。我已经尝试添加你的css代码，但我仍然有一个问题：图像在“悬停”上移动。然后我会尝试Tuff的答案。这有点复杂，他似乎比我做了更多的分析。非常感谢布莱恩的帮助。当我尝试这个插件时，它比我期望的更复杂。非常感谢。我现在理解了这个问题“我已经用块元素中的标题包装了图像”。我已经尝试过你的解决方案，但仍然有一个问题：标题在相同的图像上：我同意，我不需要javascript来制作标题，但在这种情况下，我希望有一个像slideToggle一样的jquery效果，这就是为什么我使用jqueryI的原因。我尝试了很多东西，但都没有成功。最后，我尝试了一个，没问题：另外，我修改了插件：我删除了gsWrapper的css属性：“position:relative”和“display:inline block”，我知道，使用table不是一个好的做法。你觉得我的技术怎么样？我想做它与css。另外，我可以尝试其他jquery插件，也许我可以找到一个更容易修改的插件。没错，对非表格数据使用table是一种糟糕的做法。我认为你在给自己制造不必要的困难，特别是当你有你想做的工作的例子时。我也在我的答案中添加了一个纯CSS的slideToggle演示。我从来没有在设计中使用过。在这种特殊情况下，这是我找到的唯一解决方案。但是，我有一个更好的解决办法。我使用另一个插件：黑白jQuery插件。链接：很容易定制，我已经在10分钟内完成了我想要的。非常感谢。我现在理解了这个问题“我已经用块元素中的标题包装了图像”。我已经尝试过你的解决方案，但仍然有一个问题：标题在相同的图像上：我同意，我不需要javascript来制作标题，但在这种情况下，我希望有一个像slideToggle一样的jquery效果，这就是为什么我使用jqueryI的原因。我尝试了很多东西，但都没有成功。最后，我尝试了一个，没问题：另外，我修改了插件：我删除了gsWrapper的css属性：“position:relative”和“display:inline block”，我知道，使用table不是一个好的做法。你觉得我的技术怎么样？我想做它与css。另外，我可以尝试其他jquery插件，也许我可以找到一个更容易修改的插件。没错，对非表格数据使用table是一种糟糕的做法。我认为你在给自己制造不必要的困难，特别是当你有你想做的工作的例子时。我也在我的答案中添加了一个纯CSS的slideToggle演示。我从来没有在设计中使用过。在这种特殊情况下，这是我找到的唯一解决方案。但是，我有一个更好的解决办法。我使用另一个插件：黑白jQuery插件。链接：