Lighten svg part on hover without knowing original color

Question

Ok, so I have made a piechart with angular and svg. It looks ok, but it is not really responding that well to hover events.

That is the path that draws a pie slice. it should be noted here that the colors must be fetched from a backend server, so I cannot simply hardcode this into the css.

The css that I have right now looks like this

.slice {
    cursor: pointer;
}

.slice:hover {
    fill: #333;
}

And it works, but preferably I would like to just lighten the color on hover instead of setting it to #333.

Can this be done with pure CSS or do I need to somehow map that property to angular code?

user_5557544 · Answer

You could use:

-webkit-filter: brightness(1.5);
-moz-filter: brightness(1.5);
-ms-filter: brightness(1.5);
filter: brightness(1.5);

user_2780943 · Answer

You could potentially do it by creating a white div in front, and adding an alpha channel to make it partially transparent.

Try running the snippet below and see if it does what you need.

.box {
  width: 100px;
  height: 100px;
}
.box:hover::after {
  content: "";
  background-color: rgba(255,255,255,0.25);
  width: 100%;
  height: 100%;
  display: block;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.black {
  background-color: black;
}
.yellow {
  background-color: yellow;
}

Lighten svg part on hover without knowing original color

2 Answers