图像叠加帮助 - 全部叠加在一张图像上

发布于 2024-09-29 12:34:43 字数 518 浏览 3 评论 0 原文

我有一组四个图像，我的功能目标是当您将鼠标悬停在图像缩略图上时，它会应用一个覆盖层，其中包含一些您可以单击的信息。

为了给您一个想法，请看一下这张图片：

我已经掌握了基础知识，但目前叠加层仅堆叠在左上角图像中。不知道如何解决它，所以我想知道你们是否可以帮忙。

这是网站： http://lab.albionmedia.biz/clients/silverdale/

看看我的编码并看看你的想法！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧时模样 2024-10-06 12:34:43

div 现在是块元素，并且它们没有高度，因为它们被浮动/绝对定位元素填充。

更改：

#columns .column .image {
   position:relative;
 width:100%;
}

至：

#columns .column .image {
  float:left;
  position:relative;
}

您应该得到更接近您想要的东西。此后可能需要一些调整。

The div's are now block elements, and they have no height because they are filled by floats/absolute positioned elements.

Change:

#columns .column .image {
   position:relative;
 width:100%;
}

To:

#columns .column .image {
  float:left;
  position:relative;
}

And you should get something much closer to what you want. It might need some tweaking after this.

回复收藏 0 原文

以为你会在 2024-10-06 12:34:43

无需接触 CSS，您就可以让 jQuery 为您完成所有工作。

$('.overlay').fadeTo(0,0); //hide the images to start with
$('.image').hover(function(){
        $(this).children('.overlay').fadeTo(200,1)},
    function(){
        $(this).children('.overlay').fadeTo(200,0)}
);

without touching the CSS, you could get jQuery to do everything for you.

$('.overlay').fadeTo(0,0); //hide the images to start with
$('.image').hover(function(){
        $(this).children('.overlay').fadeTo(200,1)},
    function(){
        $(this).children('.overlay').fadeTo(200,0)}
);

回复收藏 0 原文

~没有更多了~