Перевод вопроса @mseabra на EN SO:
Моя диаграмма Венна состоит из трёх кругов, и я хочу масштабировать их при ховере так, чтобы при наведении мыши на пересечение кругов увеличивались все пересекающиеся круги.
Пока получается увеличивать только один из них:
.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>