Why does a copy of the text below appear on the element?

Question

css

When checked with github pages, a translucent copy of the text below appears in the category, and without any system. When you change any parameter (screen size, remove some property on the developer panel), it disappears, but when updated, it returns back, and not always on the same element.

Page: https://pcheluntik.github.io/TellUs/category.html
Element code:

<li>
  <a href="" class="b-green category-item">
    <p class="stock-quantity">135</p>
    <img src="resources\img\barbershop.svg" alt="">
    <p>Парикмахерские</p>
  </a>
</li>

How to fix it? It may be related to hover, but I can't find how it happens

Answer 1

Solved with a fixed-size img wrapper block, after which the text doesn't move

Answer 2

interesting bug. only available in chrome. empirically established that it is due to the gradient.