Search code examples
htmlcssanimationhoverclip-path

How do I keep hover effects with a clip-path transition?

I have an button animation on hover that looks like this:

button animation

It is two divs stacked on top of each other, then on hover a clip-path is applied to hide the top div, showing the one on the bottom. The CSS is this

.wipe_point {
  clip-path: polygon(-1% 0%, 101% 0%, 101% 100%, 50% 200%, -1% 100%);
  transition: 0.5s ease;
}

.wipe_point:hover {
  clip-path: polygon(-1% -170%, 101% -170%, 101% -70%, 50% 30%, -1% -70% );
}

My problem is that the :hover is not detected on the clipped area. Meaning that if the mouse is not always within the "un-clipped" area the animation looks like this:

broken example

Question: How do I get the hover to still be detected in the clipped area? Thanks!!

Solution

  • I would do it differently using one element like below:

    .box {
  font-size:20px;
  font-weight:bold;
  font-family:sans-serif;
  padding:15px 30px;
  display:inline-block;
  color:transparent;
  background:
    conic-gradient(from -60deg,black 120deg,#fff  0) top/100% 400%,
    conic-gradient(from -60deg,#0000 120deg,blue 0) top/100% 400%;
  -webkit-background-clip:text,padding-box;
  background-clip:text,padding-box;
  transition:1s;
}
.box:hover {
  background-position:bottom;
}
    <div class="box">Some Text</div>

    The above will not work on Firefox so you can do like below

    .box {
  font-size:20px;
  font-weight:bold;
  font-family:sans-serif;
  padding:15px 30px;
  display:inline-block;
  color:transparent;
  background:conic-gradient(from -60deg,black 120deg,#fff 0) top/100% 400%;
  -webkit-background-clip:text;
  background-clip:text;
  transition:1s;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:conic-gradient(from -60deg,#0000 120deg,blue 0) top/100% 400%;
  transition:1s;
}

.box:hover,
.box:hover::before{
  background-position:bottom;
}
    <div class="box">Some Text</div>