Olá! Boa tarde. Estou tentando provocar o seguinte efeito: ao passar o mouse por cima de uma tag "a", o background-color da div pai na qual esta tag "a" é filha, possa mudar em transição mas num formato circular aonde este círculo partiria da tag "a" e se expandiria até atingir toda a div. É como uma transição gradiente radial do background-color.
Pensei em criar um elemento circular invisível de cor branca como pai da tag "a" mas filha da div maior. A estrutura seria:
<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>
No CSS, eu fiz o seguinte:
#div-servicos {
transition: all 150ms ease;
}
circle {
border-radius: 50%;
position: relative;
max-width: 100%;
max-height: 100%;
}
e no 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;");
});
Com isso, eu consegui criar o efeito de:
para:
O grande problema é que mesmo colocando o atributo "transform: scale(25)" no Js, parece que ele não está funcionando no "círculo" que criei.
O problema está quase resolvido e consegui inserir uma mudança na cor do texto contido dentro da tag "p" quando ocorre a animação mas acho que precisarei jogar a tag "p" para frente da camada da div de classe ripple (de acordo com a sugestão do comentário abaixo).