Limit hover area of CSS shapes to :after - html

Question

I am trying to make a sort of Venn-Diagram that is going to be used for navigation later.
I have three intersecting ellipsoids created with CSS shapes. Each ellipsoid, as well as their two intersections, will be distinct links later on. Also, when you hover over them they should pop out as per transform: scale(1.3).
My issue is that I'm using ellipsoids which are partially transparent with :after to create the intersections, which creates a problem when hovering over them because the :hover condition gets triggered when hovering anywhere on the partially transparent ellipsoid and not just the :after part. This means that the nonintersecting areas are not hoverable because they are obstructed by the other invisible ellipsoid.
I think the example will make this clearer.
Here is the code:
CSS:
.venn-container{position: relative; left: 0;}
.cat_one{
width: 400px;
height: 200px;
background: red;
border-radius: 200px / 100px;
position: absolute;
float: left;
opacity: 0.5;
}
.cat_two{
width: 400px;
height: 200px;
background: green;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 240px;
opacity: 0.5;
}
.cat_three{
width: 400px;
height: 200px;
background: blue;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 480px;
opacity: 0.5;
}
.int1{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
}
.int1:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: 240px;
}
.int1:hover{
transform: scale(1.3);
left: -35px;
}
.int2{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
left: 80px;
}
.int2:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: -240px;
}
.int2:hover{
transform: scale(1.3);
left: 115px;
}
HTML:
<div class="venn-container">
<div class="cat_one"></div>
<div class="cat_two"></div>
<div class="cat_three"></div>
<div class="int1"></div>
<div class="int2"></div>
</div>
And here is a fiddle: https://jsfiddle.net/y3Lvmuqg/2/
I would like the :hover to only get triggered in the intersections, and later make cat_one and cat_two hoverable outside the intersections.
I don't know if there is a way I'm doing this is the best and I'm open to suggestions.

Answer 1

Thanks for getting back to me #ge0rg I spent about an hour fiddling with CSS and HTML and came up with this code using just divs with background colors, hover events and border radius's (along with a few z-index and positioning techniques).
Hope you enjoy your reworked venn diagram...
You may have to mess around with the size, and definetly will have to mess with the positioning (however they're all inside a div and so it makes it so that you can just position the div and the rest will happen magically) I added a background color to the div just to show that nothing was transparent, and I also added a always on top function for viewing a section, and I hope you enjoy!
.Venn {
background: linear-gradient(to bottom right, blue, lightblue);
}
.d1:hover, .d2:hover, .d3:hover {
color: #565656;
animation: top 2s steps(2, end) forwards;
-webkit-animation: top 2s steps(2, end) forwards;
box-shadow: 0px 0px 20px white;
}
.d1, .d2, .d3 {
overflow-wrap: break-word;
}
.d1 center, .d3 center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.d1 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 0px;
}
.d3 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 2;
position: absolute;
border-radius: 100%;
top: 0px;
left: 81px;
}
.d1:hover, .d3:hover {
transform: scale(1.05);
}
.d2 {
border-radius: 100% 0;
height: 90px;
width: 87.5px;
transform: rotate(-45deg) scale(.7);
position: absolute;
top: 15px;
left: 55.35px;
z-index: 3;
border: 1px solid black;
}
.d2b {
transform: rotate(45deg);
padding: 0;
margin: 0;
}
.d2b center {
position: relative;
left: 20px;
}
.d2:hover {
transform: rotate(-45deg);
}
.Venn {
height: 100px;
}
-webkit #keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
#keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
<div class="Venn" style="position: relative; left: 50px; width: 300px; height: 100px;">
<div class="d1" style=" background-color: grey;">
<center> 1 </center>
</div>
<div class="d2" style=" background-color: #AAAAAA;">
<div class="d2b" style="max-width: inherit;">
<center> 2 </center>
</div>
</div>
<div class="d3" style=" background-color: lightgrey;">
<center> 3 </center>
</div>
</div>
For those of you who would prefer a JSfiddle/ CodePen here you go a Codepen.