I have the following code:
$("[data-ripple]").hover(function(e) {
var $self = $(this.parentNode);
var $color = $(this).data("ripple");
var $divServicos = document.getElementById("div-servicos");
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
});
$divServicos.setAttribute("style","color: rgba(255,255,255, 1); background-color: rgba(20,94,69,1.00);");
var texto = $($self).html();
texto = texto.substr(0, texto.indexOf('<a'));
$(".ripple").append(texto);
}, function(e) {
$('div.ripple').remove();
document.getElementById("div-servicos").setAttribute("style","color: green");
});.div-secao {
width: auto;
position: relative;
overflow: hidden;
margin: 0 auto;
height: auto;
}
.box-content-informacoes{
margin: 100px auto 5px auto;
height: auto;
background-color: rgba(255,255,255,1);
text-align: center;
font-family: "passion-one";
color: #1A7F5F;
font-size: 25px;
line-height: 30px;
transition: max-height 250ms ease;
max-height: auto;
}
#div-servicos {
transition: all 150ms ease;
}
#h1Servicos {
font-size: 60px;
font-family: 'Bebas Neue';
}
.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: relative;
border-radius: 50%;
transform: scale(0.7); -webkit-transform: scale(0.7);
background: rgba(255,255,255, 1);
opacity: 0.6;
animation: ripple 4s forwards;
-webkit-animation: ripple 4s 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);}
}<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.3.1.js"integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<main>
<article class="container-fluid" style="padding: 0">
<main class="div-secao" id="SecaoServicos">
<div class="row">
<div class="col-lg-12">
<article>
<div class="box-content-informacoes" id="div-servicos">
<br>
<h1 id="h1Servicos">Problemas com seu <strong>negócio? </strong>Podemos te ajudar!</h1>
<p id="pFonte">Precisa de um rumo no seu negócio, mas ainda não sabe o caminho certo a seguir? Quer divulgar o seu empreendimento e aumentar o seu número de clientes? Ou não tem interesse em negócios, mas é louco para fazer aquele projeto da sua casa dos sonhos que nunca coube no seu bolso? Necessita de novas tecnologias que auxiliem no seu desenvolvimento profissional e pessoal? Entende a importância de projetos de engenharia pra você hoje, mas não consegue pagar? Nós temos a solução para você! Conheça melhor nossos serviços cicando <a id="aLink" data-ripple="rgba(20,94,69,1.00)" href="https://drive.google.com/file/d/1LBk1Xrp1j5zxZaftt_Fr1r_YMUPpELwE/view?usp=sharing"><strong>aqui</strong></a>
</p>
</div>
</article>
</div>
</div>
</main>
</article>
</main>
</body>What I need to solve is the following:
When the hover event happens, a ripple class div is created with the absolute position to override the native div of the HTML code. The same text of this native div is inserted inside this ripple class div. In addition, a second div is created from ripple-wave class that aims to create that ripple animation by expanding across the div. The text with you in the "p" tag inside the native div must appear without any transparency in front of this ripple-wave class div.
