Styling (scss)

How can i keep the darker background of image 1 when I hover over the button? So, when i hover over the image the opactity of the image becomes less transparent, but when i hover over the button that is placed on the image, the opacity is set back to completely transparent. How can I keep the background image darkened, while I hover over the button?  
2 answers

Hi Jannes,

If you add “pointer-events:none;” to the button element, does that result in what you try to achieve?


EDIT: It doesn’t. It’ll have the desired hover effect of the underlying element, however you will no longer be able to click the button.

I don’t think this can be solved using css only, you’ll probably need some javascript/jQuery solution.

Good luck! 


Another way to tackle this design is to  not use a button at all. Instead use a centered text item, that is styled to look like image 2 when not hovered. And on hover just target the style of the text.

     border: 1px solid white;
     color: white;