background-color with animation and pulse

Question

Hello! Good afternoon, sir. I’m trying to have the following effect: by hovering over an "a" tag, the background-color of the parent div in which this "a" tag is daughter, can change in transition but in a circular format where this circle would start from the "a" tag and expand until it reaches the entire div. It’s like a radial gradient transition from background-color.

I thought of creating an invisible circular element of white color as father of the tag "a" but daughter of the major div. The structure would be:

<main>
  <article>
    <div class="box-de-texto" id="div-servicos">

     <p>texto...<p>
      <circle>
       <a>clique aqui</a>
      </circle>
     <p> mais texto>

    </div>
  </article>
</main>

In CSS, I did the following:

#div-servicos {
    transition: all 150ms ease;

}

circle {
    border-radius: 50%;
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

and in the Js:

var a = document.getElementById("aLink");
var div = document.getElementById("div-servicos");
var circle = document.getElementById("circle");

$(a).on("mouseover", function(){
    div.setAttribute("style","background-color: rgba(20,94,69,1.00); color: white;");
    circle.setAttribute("style","transform: scale(25); background-color: white;");
});

With that, I was able to create the effect of:

for:

The big problem is that even putting the attribute "Transform: Scale(25)" in Js, it seems that it is not working in the "circle" that I created.

The problem is almost solved and I managed to insert a change in the color of the text contained within the "p" tag when the animation occurs but I think I will need to play the "p" tag in front of the ripple class div layer (according to the suggestion of the comment below).

Answer 1

Based in that reply soen:

jQuery(function($) {

  // MAD-RIPPLE // (jQ+CSS)
  $("[data-ripple]").hover(function(e) {
    
    var $self = $(this.parentNode);
    var $color = $(this).data("ripple");
    
    if($self.is(".btn-disabled")) {
      return;
    }
    if($self.closest("[data-ripple]")) {
      e.stopPropagation();
    }
    
    var initPos = $self.css("position"),
        offs = $self.offset(),
        x = e.pageX - offs.left,
        y = e.pageY - offs.top,
        dia = Math.min(this.offsetHeight, this.offsetWidth, 100), // start diameter
        $ripple = $('<div/>', {class : "ripple",appendTo : $self });
    
    if(!initPos || initPos==="static") {
      $self.css({position:"relative"});
    }
    
    $('<div/>', {
      class : "rippleWave",
      css : {
        background: $color,
        width: dia,
        height: dia,
        left: x - (dia/2),
        top: y - (dia/2),
      },
      appendTo : $ripple
    });
  }, function(e) {
    $('div.ripple').remove();
  });
});

/* No hover das tags com o atributo data-ripple, as tags p "do lado" ficam com a cor definida */
[data-ripple]:hover + p {
  color: red;
}

/* MAD-RIPPLE EFFECT */
.ripple{
  position: absolute;
  top:0; left:0; bottom:0; right:0;
  overflow: hidden;
  -webkit-transform: translateZ(0); /* to contain zoomed ripple */
  transform: translateZ(0);
  border-radius: inherit; /* inherit from parent (rounded buttons etc) */
  pointer-events: none; /* allow user interaction */
          animation: ripple-shadow 0.4s forwards;
  -webkit-animation: ripple-shadow 0.4s forwards;
}
.rippleWave{
  backface-visibility: hidden;
  position: absolute;
  border-radius: 50%;
  transform: scale(0.7); -webkit-transform: scale(0.7);
  background: rgba(255,255,255, 1);
  opacity: 0.45;
          animation: ripple 5s forwards;
  -webkit-animation: ripple 5s forwards;
}
@keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@-webkit-keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@keyframes ripple {
  to {transform: scale(999);}
}
@-webkit-keyframes ripple {
  to {-webkit-transform: scale(999);}
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<div>
  <h1>Click to Ripple</h1>
  <a data-ripple="rgba(0,0,0,1)">data-ripple</a>
  <p>More text</p>
</div>

<div>
  <h1>Click to Ripple</h1>
  <a data-ripple="rgba(0,255,0,0.5)">data-ripple</a>
  <p>More text</p>
</div>