Disable link animation?

Hello,
on relaunch.blumen-hegemann.de I have built some content boxes that link to various sites with the HTML-Element.

The html goes like this:

  <div class="button-box">
    <a href="floristik"><img src="https://relaunch.blumen-hegemann.de/wp-content/uploads/button-blumen.jpg" alt="Blumen" /></a>
   <a href="floristik"><div class="button-text">Blumen</div></a>
 </div>

The CSS:

.button-box {position: relative; width:360px; height:360px; margin-bottom: 80px; }
  .button-img {width: 100%;	height: 100%;object-fit: cover;opacity: 0.7; }
  .button-text {position: absolute; left: 0;width: 100%; top: calc(50% - 20px); text-align: center; font-size: 58px; line-height: 1.2;letter-spacing:5px;	font-weight: bold; color: #000;text-transform: uppercase; }
  .button-img:hover {opacity: 0.4; }

Nothing spectacular, the button fades on hover, that’s all.

Now Enfold theme add the following before the closing :

<span class="image-overlay overlay-type-extern" style="left: -5px; top: 0px; overflow: hidden; display: block; height: 360px; width: 370px;">
<span class="image-overlay-inside">::before></span>
</span>

The result is very strange: depending on where I hover over the box (top, middle, down), either my CSS works, or the Enfold image-overlay works, or (middle) nothing happens.

How can I turn off this animation (image-overlay)?

Thanks,
Daniel

• This topic was modified 5 years, 1 month ago by danielmarsch.