I am currently working on developing a filterable portfolio that features a colored overlay showcasing the project title similar to this example:
Example of Overlay: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
However, I have encountered an issue where the filter does not seem to function properly when attempting to implement it into my portfolio code.
Portfolio Code: 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>I appreciate any assistance as I am struggling to resolve this issue!