Rectangle 27 0

javascript Display text when hovering over image?


.exp{
  display: none;
}
.skill:hover + .exp{
  display: block;
 }
Note
Rectangle 27 0

javascript Display text when hovering over image?


.skill + .exp {
  opacity: 0;
  transition: opacity 1s;
}
.skill:hover + .exp {
  opacity: 1;
}
<img src="http://www.placehold.it/300" alt="Javascript" class="skill">
<p class="exp">Text goes here</p>
  • The text is hidden with opacity: 0
  • The text is shown on hover with opacity: 1
  • The transition smoothly fades the text in and out

Note: The text could also be hidden with display: none and shown with display: block, but this method cannot be transitioned.

This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element.

Using the adjacent (+) selector, hide the text after the image and show it when the image is hovered.

Note
Rectangle 27 0

javascript Display text when hovering over image?


<!DOCTYPE html>
<html>
<body>

<img src="Your Image source" alt="Your text" width="42" height="42" title="Your text Goes here">

</body>
</html>

What are you trying to achieve? I mean you wanted to give an expression to the user if they hover over the image you want to show something like a tooltip? if that is what you want to do than that could be done by using the tile in image tag

Note
Rectangle 27 0

javascript Display text when hovering over image?


<!DOCTYPE html>
<html>
<body>

<img src="Your Image source" alt="Your text" width="42" height="42" title="Your text Goes here">

</body>
</html>

What are you trying to achieve? I mean you wanted to give an expression to the user if they hover over the image you want to show something like a tooltip? if that is what you want to do than that could be done by using the tile in image tag

Note
Rectangle 27 0

javascript Display text when hovering over image?


.skill {
    position:relative;
    z-index:101;
}
.skill:hover {
    z-index:99;
}
.exp{
    position : absolute;
    top:100px;
    left:20px;
    z-index:100;
}

Simply add this css code :

Note