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.
.image:hover{
.text{
border: 1px solid white;
background-color:transparent;
color: white;
}
}