在动画渐变背景上实施 jquery fancybox

Question

我有一个动画渐变背景，我想在它上面放一个花式框。渐变和花式框位于两个不同的堆叠 div 中，但由于某种原因，渐变阻止了对可点击缩略图的访问。当我把渐变 div 拿走时，fancybox 就像一个美女。我应该怎么做才能使它们兼容？站点：http://studiopowell.net/TEST_gradient.html

</head>
<body>

<div id="titles"><img src="archive-icon.png" width="185" height="185" alt="studio powell michael powell studiopowell art artist books installation video" /><br /><br />&nbsp; M I C H A E L &nbsp; P O W E L L<br /><br /></div>
<a class="fancybox" rel="group" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>

<div id="gradient"></div>

</body>
</html>

css:

.fancybox {
    margin:auto;
    width:10%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
} 

 #titles {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color:#33;
    text-align:left;
    padding-left: 20px;
    padding-top: 10px;  
}

#gradient
{
  width: 100%;
  height: 1000px;
  padding: 0px;
  margin: 0px;
  opacity: 0.1;
  margin-top: -600px;
}

Answer 1

发生这种情况是因为您的渐变容器位于您网站上所有其他元素的上方。所以当点击时 - 你只是点击渐变容器而不是触发你的花式框功能的元素。

为了解决这个问题 - 您需要确保要触发花式框脚本的元素位于顶部并且可以点击。

最好的解决方案是创建一个包装器 div 元素来包装您网站的所有内容，然后在该包装器上设置动画渐变。然后将所有 images/logos 等插入该元素内。例如

<div class="wrapper"> <-- Apply your Gradient animation to this element -->
    <div class="titles"></div>
    <a class="fancy box"></a>
</div>

通过遵循此方法 - 您可以确保您的精美框元素和所有其他网站内容仍然可点击。

Answer 2

只需将 CSS position 和 z-index 应用于您的元素，例如：

.fancybox {
    ...
    position: relative;
    z-index: 100;
}
#titles {
    ...
    position: relative;
    z-index: 100;
}
#gradient {
    ...
    position: relative;
    z-index: 10; /* lower for the gradient background */
}

在动画渐变背景上实施 jquery fancybox

implementing jquery fancybox over animated gradient background

jquery

css

animation

fancybox

gradient