The code I have:
<section class="portfolio_strict">
<div class="row isotope_portfolio_container">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="portfolio_item">
<a href="http://confreaks.tv/videos/osoa2013-running-cloud-foundry-on-openstack" target="_blank" data-path-hover="M 180,190 0,158 0,0 180,0 z">
<figure style="background-image: url(<%= asset_path('running-cloud-foundry-on-openstack.png') %>)">
<svg viewBox="0 0 180 320" preserveAspectRatio="none">
<path d="M 180,0 0,0 0,0 180,0 z" />
</svg>
<figcaption>
<p>
A description goes here.
</p>
<div class="view_button">
View
</div>
</figcaption>
</figure>
</a>
<div class="portfolio_description">
<h3>
<a href="http://confreaks.tv/videos/osoa2013-running-cloud-foundry-on-openstack" target="_blank">
Running Cloud Foundry on OpenStack
</a>
</h3>
<p>
<a href="http://confreaks.tv/presenters/dr-nic-williams">
Dr. Nic Williams
</a>
</p>
</div><!-- /.portfolio_description -->
</div><!-- /.portfolio_item -->
</div><!-- /.col-xs-12 .col-sm-6 .col-md-4 .col-lg-4 -->
</div><!-- /.row .isotope_portfolio_container -->
</section>
The result in my browser when I hover over the item:
It doesn't have the nice gray slanted box, which does show up perfectly in when I open the portfolio.html file in my browser. The main difference when I inspect element is this:
Code from portfolio.html (in Chrome, using Inspect Element):
which is different from how it appears in my own environment:
The problem seems to be that when I hover over the item in my project, the <path d='' /> line remains static, while when I hover over the portfolio item in portfolio.html, it changes depending on the state of the mouse. I've thought about looking into the snap.svg-min.js file, which is properly included, but it's minified.