Hello! Good afternoon. I am trying to provoke the following effect: when passing the mouse over a "a" tag, the background-color of the parent div in which this "a" tag is daughter, may change in transition but in a circular format where this circle would start from the "a" tag and expand until reaching the whole div. It's like a transition background-color radial gradient.
I thought about creating an invisible circular white element as the parent of the "a" tag but the daughter of the larger 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 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 this, I was able to create the effect of:
To:
Thebigproblemisthatevenputtingthe"transform: scale (25)" attribute on Js, it does not seem to be working in the "circle" I created.
The problem is almost solved and I was able to insert a change in the color of the text inside the "p" tag when the animation occurs but I think I need to play the "p" tag forward of the ripple class div layer with the suggestion of the comment below).
