0
282
VistasHow can I trigger a :hover transition that includes three overlapping div elements (Venn diagram)
My problem is that I have this Venn diagram consisting of three div elements and I want to scale them with :hover, so that when I hover over an intersection all the circles that meet in the intersection scale to my defined value. In the moment I only get one circle to scale at the time.
.circles-container {
position: relative;
width: 45.625rem;
height: 45.625rem;
}
.circle-blue {
position: absolute;
left: 0rem;
top: 0rem;
width: 28.4375rem;
height: 28.4375rem;
background-color: rgba(187, 231, 254, 0.6);
border-radius: 50%;
}
.circle-purple {
position: absolute;
right: 0rem;
top: 0rem;
width: 28.4375rem;
height: 28.4375rem;
background-color: rgba(211, 181, 229, 0.6);
border-radius: 50%;
}
.circle-pink {
position: absolute;
right: 8.59375rem;
left: 8.59375rem;
bottom: 0rem;
width: 28.4375rem;
height: 28.4375rem;
background-color: rgba(255, 212, 219, 0.6);
border-radius: 50%;
}
.second-section-circle {
transition: all, 1s;
}
.second-section-circle:hover {
transform: scale(1.1);
}<div class="circles-container">
<div class="circle-blue second-section-circle"></div>
<div class="circle-purple second-section-circle"></div>
<div class="circle-pink second-section-circle"></div>
</div>
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
I finalized Deon Rich's idea, so that the circles react to crossing their border, and not the border of the square described around them.
And also added a helper function and the loops so as not to manually list all the circles in the diagram. Now the script code does not depend on the number of circles in the diagram.
https://codepen.io/glebkema/pen/OJjNwzd
let circlesElements = document.getElementsByClassName("second-section-circle");
let circlesInfo = [];
for (let elem of circlesElements) {
circlesInfo.push(getCircleInfo(elem));
}
// console.log(circlesInfo);
window.addEventListener("mousemove", (e) => {
for (let info of circlesInfo) {
let deltaX = e.pageX - info.centerX;
let deltaY = e.pageY - info.centerY;
if (deltaX * deltaX + deltaY * deltaY <= info.radius2) {
// if mouse is over element, scale it...
info.elem.style.transform = "scale(1.2)";
} else {
// otherwise, dont scale it...
info.elem.style.transform = "scale(1)";
}
}
});
function getCircleInfo(elem) {
let rect = elem.getBoundingClientRect();
let radius = (rect.right - rect.left) / 2;
return {
elem: elem,
centerX: (rect.right + rect.left) / 2,
centerY: (rect.bottom + rect.top) / 2,
radius2: radius * radius
};
}.circles-container {
position: relative;
width: 45.625rem;
height: 45.625rem;
}
.second-section-circle {
position: absolute;
width: 28.4375rem;
height: 28.4375rem;
border-radius: 50%;
transition: all, 1s;
}
.circle-blue {
left: 0rem;
top: 0rem;
background-color: rgba(187, 231, 254, 0.6);
}
.circle-pink {
right: 8.59375rem;
left: 8.59375rem;
bottom: 0rem;
background-color: rgba(255, 212, 219, 0.6);
}
.circle-purple {
right: 0rem;
top: 0rem;
background-color: rgba(211, 181, 229, 0.6);
}<div class="circles-container">
<div class="second-section-circle circle-blue"></div>
<div class="second-section-circle circle-purple"></div>
<div class="second-section-circle circle-pink"></div>
</div>
·
Santiago Trujillo
Denunciar
Responde la pregunta