投资组合过滤器上的悬停行为无法预测

Question

我正在尝试实现一个普通的js / jquery过滤器以及一堆缩略图，这些缩略图会在鼠标悬停时显示图像，我发现它比我预期的更令人沮丧。

jQuery(document).ready(function($) {
  $(function() {
    var selectedClass = "";
    $(".fil-cat").click(function() {
      selectedClass = $(this).attr("data-rel");
      $("#portfolio").fadeTo(100, 0.1);
      $("#portfolio div").not("." + selectedClass).fadeOut().removeClass('scale-anm');
      setTimeout(function() {
        $("." + selectedClass).fadeIn().addClass('scale-anm');
        $("#portfolio").fadeTo(300, 1);
      }, 300);

    });
  });
});

#portfolio {
  margin: 1rem 0;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  -webkit-column-width: 33.33333333333333%;
  -moz-column-width: 33.33333333333333%;
  column-width: 33.33333333333333%;
}

.tile {
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 350ms ease;
  transition: all 350ms ease;
}

.tile:hover {}

.scale-anm {
  transform: scale(1);
}

.tile img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

 ::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.tile:hover .overlay {
  height: 100%;
}

.btn {
  font-family: Roboto;
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  line-height: normal;
  padding: .5rem 1rem;
  margin: 0;
  height: auto;
  border-bottom: 3px solid #EA5A28;
  vertical-align: middle;
  -webkit-appearance: none;
  color: White;
  background-color: black;
  border-radius: 0;
}

.btn:hover {
  text-decoration: none;
  border-bottom: 3px solid #EA5A28;
}

.btn:focus {
  outline: none;
  border-color: var(--darken-2);
  -webkit-box-shadow: 0 0 0 3px var(--darken-3);
  box-shadow: 0 0 0 3px var(--darken-3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn fil-cat" href="" data-rel="all">All</button>
<button class="btn fil-cat" href="" data-rel="featured">Featured</button>
<button class="btn fil-cat" href="" data-rel="brandidentity">Brand Identity</button>
<button class="btn fil-cat" href="" data-rel="brandinteriors">Brand Interiors</button>
<button class="btn fil-cat" data-rel="online">Online</button>
<button class="btn fil-cat" data-rel="overseas">Overseas</button>
<button class="btn fil-cat" data-rel="print">Print</button>

<div style="clear:both;"></div>
<div id="portfolio">
  <div class="tile scale-anm web all featured overseas">
    <a href="https://thoughtpencil.com/fabercastell/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/overseas-fabercastell-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-13.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all featured brandidentity brandinteriors">
    <a href="https://thoughtpencil.com/baako/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/branded-baako-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-06.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all featured brandidentity brandinteriors print online">
    <a href="https://thoughtpencil.com/lvb/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/brand-lvb-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-03.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all featured brandidentity">
    <a href="https://thoughtpencil.com/crown/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/brand-crown-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-02.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all featured online">
    <a href="https://thoughtpencil.com/monks/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/online-monks-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-10.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all online featured ">
    <a href="https://thoughtpencil.com/plush/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/online-plush-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-12.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all  online">
    <a href="https://thoughtpencil.com/pamperazi/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/online-pamperazi-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-11.jpg" alt="Avatar" class="">
    </div>
  </div>

  <div class="tile scale-anm web all overseas">
    <a href="https://thoughtpencil.com/koba/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/overseas-kobabatteries-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-15.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all online">
    <a href="https://thoughtpencil.com/kck/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/online-kck-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-09.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all overseas">
    <a href="https://thoughtpencil.com/micromax/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/overseas-micromax-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-16.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all overseas">
    <a href="https://thoughtpencil.com/mitsubishi/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/overseas-mitsubishi-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-17.jpg" alt="Avatar" class="">
    </div>
  </div>
  <div class="tile scale-anm web all overseas">
    <a href="https://thoughtpencil.com/sony/">
      <img src="https://thoughtpencil.com/portfolioassets/cover/overseas-sony-cover.jpg" alt="" />
    </a>
    <div class=" overlay">
      <img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-14.jpg" alt="Avatar" class="">
    </div>
  </div>
</div>
<div style="clear:both;"></div>

最初，悬停按钮在过滤器之后不起作用，因此我对它们应用了比例变换，但是现在它们没有滚动到div的顶部。

此外-底部元素上的悬停似乎不起作用，我不确定为什么。

供参考-我正在尝试实现以下目标：

https://preview.codecanyon.net/item/portfolio-grid-masonry-portfolio-filter-plugin-for-elementor-page-builder/full_screen_preview/22205857?_ga=2.70872016.1569010122.1549531134-995413850.1549049448

但是我遇到一个错误，该错误使鼠标悬停看起来像这样

https://imgur.com/a/VX6eFIF

任何输入将不胜感激。

这是我的小提琴：https://jsfiddle.net/4jLbz1tc/

编辑：

这是我正在测试的地方

https://thoughtpencil.com/testbed/