![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
July 14, 2019 at 11:13 am #1118472
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.
July 14, 2019 at 11:15 am #1118473<div class="button-box"> <a href="floristik"><img src="https://relaunch.blumen-hegemann.de/wp-content/uploads/button-blumen.jpg" alt="Blumen" class="button-img"></a> <a href="floristik"><div class="button-text">Blumen</div></a> </div>
-
This reply was modified 5 years, 1 month ago by
danielmarsch.
July 14, 2019 at 10:53 pm #1118603Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:.button-img:hover { opacity: 1 !important; } .image-overlay .image-overlay-inside:before { display: none !important; }
Best regards,
MikeJuly 15, 2019 at 10:10 am #1118719Thanks Mike, that helped!
July 15, 2019 at 4:23 pm #1118848Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
This topic was modified 5 years, 1 month ago by
-
AuthorPosts
- The topic ‘Disable link animation?’ is closed to new replies.