How do I show a div when hovered on a different div-CodePudding

I have a profile icon. And upon hover, I want it to show the "Profile" text above the icon. I also want to ensure that when the text shows up, its above the icon, not below it. Current the text shows below the icon, how do I make the text show above the icon? I want to do this in pure CSS/HTML. I don't want to use javascript.

I also don't want any other div elements to move when the text is shown above the icon upon hover.

.hide {
  display: none;
}

.body {
    width: 400px;
    height: 100px;
    background: blue;
}

.myDIV {
height: 20px;
width: 20px;
background: url('https://i.imgur.com/gIELtaC.png');
}
    
.myDIV:hover   .hide {
  width: max-content;
  display: block;
  color: red;
  background: purple;
}

<div >
    <div ></div>
    <div >Profile</div>

    <div ></div>
    <div >Another Profile</div>
</div>

CodePudding user response：

To pop up a text without changing other div positions, you need wrap it to a relatvie div and use position: absolute to define the text position. Here is an example:

.body {
    width: 400px;
    height: 100px;
    background: blue;
}

.icon {
  height: 20px;
  width: 20px;
  background: url('https://i.imgur.com/gIELtaC.png');
}
    
.text {
  display: none;
  width: max-content;
  color: red;
  background: purple;
}

.icon-with-text {
  position: relative;
}

.icon-with-text .text {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
}

.icon:hover   .text {
  display: block;
}

<div >
    <div >
      <div ></div>
      <div >Profile</div>
    </div>
    
    <div >
      <div ></div>
      <div >Another Profile</div>
    </div>
</div>