I want to hover over the rotating circle to display the 4 "about" texts. But the issue is that I am using flexbox and when I enter the cursor into the area covered by flex, it displays the text, but I want it to only appear when hovering over the rotating circle. I think the issue is due to overlapping. You can see the demo of the issue here. https://www.youtube.com/watch?v=74Qzns1ooOI
My HTML code is below:
.main .some-page-wrapper p {
opacity: 0;
}
.main:hover .some-page-wrapper p {
opacity: 1;
}
.main img:hover {
width: 480px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 1;
}
.some-page-wrapper {
/* background-color: red; */
align-items: center;
justify-content: center;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* width: 100%; */
}
.column {
display: flex;
flex-direction: column;
/* flex-basis: 100%; */
flex: 1;
}
.orange-column {
color: white;
font-family: 'hermes';
font-size: 50px;
/* background-color: orange; */
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.blue-column {
color: white;
font-family: 'hermes';
font-size: 50px;
/* background-color: blue; */
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.green-column {
color: white;
font-family: 'hermes';
font-size: 50px;
/* background-color: green; */
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}<div class="main">
<img class="dp" src="assets/logo.png">
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='orange-column'>
<p>About</p>
</div>
</div>
<div class='column'>
<div class='blue-column'>
<p>About</p>
</div>
</div>
</div>
<div class='row'>
<div class='column'>
<div class='green-column'>
<p>About</p>
</div>
</div>
<div class='column'>
<div class='orange-column'>
<p>About</p>
</div>
</div>
</div>
</div>
</div>If I understand correctly, the box sizing of your image is quite a lot wider than you expect, causing your hover to activate before the cursor touches the visible image border.
If so, you can round its borders into a cirle via border-radius:
img.dp {
border-radius: 50%;
}
I think there is a problem with overlapping as you mentioned. You need to put your image in front and activate the :hover only on the <img> element, not on the wrap.
Here is a working demo.
In short:
<img> has position: absolute and is centered so the columns are "in background"<img> tag and targets <p> element in sibling element with the + selector.