Archived topic
Problems with hover effect
3 replies · Started by Ramona on May 4, 2020
Hi there,
I have following problems with my website:
1) By default, my buttons are white with a border. When hovering, the buttons should turn blue and instead of a full border on all sides they just get underlined. This works so far, only the button text loses the blue color after a second. (The effect works very well for the border/underline, but not for the button text).
2) There is an image-row (gallery) with 6 images aligned. By default it only shows the image, when hovering the image is given a label, an inner frame and a blur effect. Sometimes this works quite well, but unfortunately it sometimes only shows 2 or 3 sides of the inside square (frame). I couldn't find out when it was displayed correctly and when it wasn't, that seems to be purely coincidental. What could be the reason for this?
Thanks in advance!
Hi there,
1. Add the pointer-events: none; to your .button-box::before CSS. This will stop the pseudo element from covering the Anchor.
2. Tricky to diagnose a problem when i can't replicate it. It sounds like a possible performance issue. Couple of CSS properties covered here may ( or may not ) help with that:
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility
Hi David,
both problems are solved, thanks a lot!
Awesome - happy to be of help.
Like what you did with the Gutenberg Core blocks. You may be interested in our new Block plugin ( currently in Beta ):
