javascript - 带有标题覆盖的可过滤投资组合

Question

我正在尝试创建一个可过滤的投资组合，其中包含一个显示元素标题的彩色叠加层，例如:

叠加示例: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

但是，当我尝试将其应用于我的投资组合代码时，过滤器不起作用。

投资组合代码:https://codepen.io/ford1234/pen/xLPELL

<div class="toolbar mb2 mt2">
<button class="pbtn fil-cat" href="" data-rel="all">All</button>
<button class="pbtn fil-cat" data-rel="live">Live</button>
<button class="pbtn fil-cat" data-rel="projects">Projects</button>
<button class="pbtn fil-cat" data-rel="events">Events</button>
</div> 

<div style="clear:both;"></div> 
<div id="portfolio">
<div class="tile scale-anm live all">
<img src="https://dev.dcrc.org.uk/wp-content/uploads/2017/08/autonomy-and-
automation.jpg" alt="">
</div>
<div class="tile scale-anm projects all">
<a href="#"><img src="http://dev.dcrc.org.uk/wp-content/uploads/2017/08/diy-
citizenship-crop.jpg" alt="" /></a>
</div>
<div class="tile scale-anm events all">
<a href="#"><img src="http://dev.dcrc.org.uk/wp-
content/uploads/2017/08/pervasive-media-cookbook-2.jpg" alt="" /></a>
 </div>
 <div class="tile scale-anm live all">
 <a href="#"><img src="http://dev.dcrc.org.uk/wp-
content/uploads/2017/08/amb-lit.jpg" alt="" /></a>
 </div>




</div>

<div style="clear:both;"></div>   

提前致谢，我陷入了困惑!

Answer 1

您没有包含 jQuery(或者没有正确包含)。一旦包含 jQuery，它就可以正常工作。

在 CodePen 中，您可以转到 CodePen 中的 Javascript 设置并从快速添加下拉列表中选择 jQuery，但您需要检查为什么它在您的本地文件中不起作用。确保它包含正确并且版本与您的代码兼容。以下是适用于您的 CodePen 的版本:

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>