How can I trigger a :hover transition that includes three overlapping div elements (Venn diagram)
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); } … Read more