可篩選投資組合與標題覆蓋

我想創建一個過濾組合用彩色疊加，顯示了項目的標題像這樣：可篩選投資組合與標題覆蓋

疊加例如： 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>

在此先感謝，我已經陷入了混亂！

來源

2017-08-15 ford

什麼不起作用？該codepen鏈接看起來很好。你需要更清楚要發生什麼...併發生了什麼，是不是有利的。 – Don

對不起，那就是當我點擊到「活」的，例如，它不過濾喜歡這裏的項目：https://codepen.io/creotip/pen/dfjeF（應包括在這之前的鏈接） – ford

所有這就是錯誤的是你不包括jQuery的（或不正確地包括在內）。包括jQuery，它完美的作品。 – FluffyKitten

您沒有包含的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>

來源

2017-08-15 19:15:08 FluffyKitten

可篩選投資組合與標題覆蓋

回答

相關問題