'Display text (flexbox) when hover over image

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>
javascripthtmlcss


Solution 1:[1]

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"
  • the hover activates only on <img> tag and targets <p> element in sibling element with the + selector.

Solution 2:[2]

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%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Martin Lévai
Solution 2 Marco

Related Questions