33

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.

How it should behave

.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>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
mseabra
  • 333
  • 2
  • 7

3 Answers3

20

A CSS only solution that requires more elements with one CSS variable to control the sizing:

.circles-container {
  --s:150px; /* adjust this to control the size*/
  width:  var(--s);
  height: var(--s);
  margin:calc(var(--s)/3) auto;
  display:grid;
}
.circles-container > * {
  grid-area: 1/1;
  transition: all 1s;
  border-radius:50%;
  position:relative;
}
.circle-blue {
  background: rgba(187, 231, 254, 0.6);
  top:calc(var(--s)/3);
}
.circle-purple {
  background: rgba(211, 181, 229, 0.6);
  left:calc(0.866*calc(var(--s)/3));
  top: calc(-0.5 *calc(var(--s)/3));
}
.circle-pink {
  background: rgba(255, 212, 219, 0.6);
  right:calc(0.866*calc(var(--s)/3));
  top:  calc(-0.5 *calc(var(--s)/3));
}
.circles-container > *:nth-child(1) {
   top:calc(var(--s)/3);
   clip-path:circle(calc(var(--s)/2) at 21% 0%);
}
.circles-container > *:nth-child(2) {
   right:calc(0.866*calc(var(--s)/3));
   top:  calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 108% 50%);
}
.circles-container > *:nth-child(3) {
   left:calc(0.866*calc(var(--s)/3));
   top: calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 21% 100%);
}
.circles-container > *:nth-child(4) {
  clip-path: polygon(29% 38%, 50% 34%, 71% 38%, 64% 60%, 50% 74%, 36% 60%);
}
.circles-container > *:nth-child(-n + 4) {
  z-index:1;
}
.circles-container > *:nth-child(1):hover ~ .circle-pink,
.circles-container > *:nth-child(1):hover ~ .circle-blue,
.circles-container > *:nth-child(2):hover ~ .circle-pink,
.circles-container > *:nth-child(2):hover ~ .circle-purple,
.circles-container > *:nth-child(3):hover ~ .circle-blue,
.circles-container > *:nth-child(3):hover ~ .circle-purple,
.circles-container > *:nth-child(4):hover ~ *,
.circles-container > *:nth-child(n + 5):hover {
  transform: scale(1.15);
}
<div class="circles-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div class="circle-blue"></div>
  <div class="circle-purple"></div>
  <div class="circle-pink"></div>
</div>

Add background colors to the extra divs to understand the puzzle:

.circles-container {
  --s:150px; /* adjust this to control the size*/
  width:  var(--s);
  height: var(--s);
  margin:calc(var(--s)/3) auto;
  display:grid;
}
.circles-container > * {
  grid-area: 1/1;
  transition: all 1s;
  border-radius:50%;
  position:relative;
}
.circle-blue {
  background: rgba(187, 231, 254, 0.6);
  top:calc(var(--s)/3);
}
.circle-purple {
  background: rgba(211, 181, 229, 0.6);
  left:calc(0.866*calc(var(--s)/3));
  top: calc(-0.5 *calc(var(--s)/3));
}
.circle-pink {
  background: rgba(255, 212, 219, 0.6);
  right:calc(0.866*calc(var(--s)/3));
  top:  calc(-0.5 *calc(var(--s)/3));
}
.circles-container > *:nth-child(1) {
   top:calc(var(--s)/3);
   clip-path:circle(calc(var(--s)/2) at 21% 0%);
}
.circles-container > *:nth-child(2) {
   right:calc(0.866*calc(var(--s)/3));
   top:  calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 108% 50%);
}
.circles-container > *:nth-child(3) {
   left:calc(0.866*calc(var(--s)/3));
   top: calc(-0.5 *calc(var(--s)/3));
   clip-path:circle(calc(var(--s)/2) at 21% 100%);
}
.circles-container > *:nth-child(4) {
  clip-path: polygon(29% 38%, 50% 34%, 71% 38%, 64% 60%, 50% 74%, 36% 60%);
}
.circles-container > *:nth-child(-n + 4) {
  z-index:1;
}
.circles-container > *:nth-child(1):hover ~ .circle-pink,
.circles-container > *:nth-child(1):hover ~ .circle-blue,
.circles-container > *:nth-child(2):hover ~ .circle-pink,
.circles-container > *:nth-child(2):hover ~ .circle-purple,
.circles-container > *:nth-child(3):hover ~ .circle-blue,
.circles-container > *:nth-child(3):hover ~ .circle-purple,
.circles-container > *:nth-child(4):hover ~ *,
.circles-container > *:nth-child(n + 5):hover {
  transform: scale(1.15);
}
<div class="circles-container">
  <div style="background:red;"></div>
  <div style="background:green;"></div>
  <div style="background:purple;"></div>
  <div style="background:black;"></div>
  
  <div class="circle-blue"></div>
  <div class="circle-purple"></div>
  <div class="circle-pink"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    There's a slight glitch that happens when you move slightly out of an overlapping area into one of the circles. It seems as if this can be fixed by removing the `:nth-child(n + 5)` so that all of the extra areas expand on their own hover too. – Neil Oct 20 '21 at 07:50
15

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>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
  • I'd recommend against using Math.pow() for squaring a number. You'd be better off with just e.g.: `((rect.right - rect.left) / 2) * ((rect.right - rect.left) / 2)`. Or precalculate some of that: `let radius = (rect.right - rect.left) / 2`, and then just use `radius * radius`. Math.pow() tends to be a bit slower because it's designed to work with any numbers, but squaring is a much simpler operation, so doesn't need that all that overhead. – Darrel Hoffman Oct 19 '21 at 13:49
  • @DarrelHoffman I agree with you, direct multiplication is faster. I have updated the code. – Gleb Kemarsky Oct 19 '21 at 15:24
13

You can achieve this, but you'll need a little JavaScript. Don't worry, it's nothing too complicated. What you can do is get the dimensions for each circle using the element.getBoundingClientRect() method, like so...

let blue = document.querySelector(".circle-blue").getBoundingClientRect();
let purple = document.querySelector(".circle-purple").getBoundingClientRect();
let pink = document.querySelector(".circle-pink").getBoundingClientRect();

And then each time the user mover the mouse, you can test whether or not the mouse is over a given element, and if it is, you can scale it REGARDLESS of what element is overlapping another, therefore causing any circle to scale, including circles included in the intersection...

let blue = document.querySelector(".circle-blue").getBoundingClientRect();
let purple = document.querySelector(".circle-purple").getBoundingClientRect();
let pink = document.querySelector(".circle-pink").getBoundingClientRect();

window.addEventListener("mousemove", (e) => {
  let x = e.pageX,y = e.pageY;

  //test blue...
  if (x > blue.left && x < blue.right && y > blue.top && y < blue.bottom) {
    // if mouse is over element, scale it...
    document.querySelector(".circle-blue").style.transform = "scale(1.2)";
  } else {
    // otherwise, dont scale it...
    document.querySelector(".circle-blue").style.transform = "scale(1)";
  }

  //test purple...
  if (x > purple.left && x < purple.right && y > purple.top && y < purple.bottom) {
    // if mouse is over element, scale it...
    document.querySelector(".circle-purple").style.transform = "scale(1.2)";
  } else {
    // otherwise, dont scale it...
    document.querySelector(".circle-purple").style.transform = "scale(1)";
  }

  //test pink...
  if (x > pink.left && x < pink.right && y > pink.top && y < pink.bottom) {
    // if mouse is over element, scale it...
    document.querySelector(".circle-pink").style.transform = "scale(1.2)";
  } else {
    // otherwise, dont scale it...
    document.querySelector(".circle-pink").style.transform = "scale(1)";
  }
});
.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;
}
<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>
Jeff Schaller
  • 2,352
  • 5
  • 23
  • 38
Deon Rich
  • 589
  • 1
  • 4
  • 14
  • 3
    This has hitboxing problems in that you're treating the circles as squares. You can fix this by using a euclidean distance formula - if the absolute distance to a circle center is less than half its width, expand it. – Emanresu a Oct 20 '21 at 05:42
  • Yeah im aware the boxes limit its functional ity slightly. Thanks for the insight – Deon Rich Oct 21 '21 at 01:51