Styling (scss)

0
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?  
asked
2 answers
1

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! 

answered
0

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.

.image:hover{
 .text{
     border: 1px solid white;
     background-color:transparent;
     color: white;
  }
}

 

answered