0 Replies - 303 Views - Last Post: 13 October 2017 - 08:52 AM

#1 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

How to create a ripple effect when user hover over on a button or link

Posted 13 October 2017 - 08:52 AM

How to create a ripple effect when user hover over on a button or link?

Below code works good, but has a small issue.

curreclty, mouse enter on button and no effect is display. Effect is only display when user exit the button. I want the effect to start when mouse enter on button.

I am guessing it has to do with "after" tags

 <button type="button" class="ripple">Filters</button>


.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10,10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
  }

.ripple:hover:after {
    transform: scale(0,0);
    opacity: .2;
    transition: 0s;
  }
}


Is This A Good Question/Topic? 0
  • +

Page 1 of 1