show label when hover over image-CodePudding

I want to create when the user hover over the image show something like this:

how can I create like this with HTML and css thanks, everyone!

CodePudding user response：

You can show the text when you hover the container. Set the container to position:relative and the text to position:absolute.

.container{
    border:1px solid black;
    width:fit-content;
  position:relative;
}
img{
    width:200px;
}
.text{
    display:none;
    color:white;
    background-color:red;
    border-radius:20px;
    padding:5px 10px;
}
.container:hover .text{
    display:block;
    position:absolute;
    top:10px;
    left:10px;
}

<div >
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" alt="">
    <div >Hello</div>
</div>

CodePudding user response：

I keep things simple as you didn't share any of your code.

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

assume container is the background image. your CSS should look like this:

.label {
    display: none;
}
.container:hover .label {
    display: block;
}

CodePudding user response：

This should work

$("document").ready(function(){
  $("img").hover(function(){
   $("p").toggle();
 });
 });

p {
  background-color:gray;
  color:yellow;
  width:80px;
  height:20px;
  border-radius:10px;
  text-align:center;
  top:10px;
  left:10px;
  position:absolute;
  display:none;
  }
  
 img {position:relative;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/VAN_CAT.png/220px-VAN_CAT.png" />
<p>Hello!</p>
</div>

CodePudding user response：

You can use title

<img src="myimg.png" title="My title"></img>