CODEWITHSUNDEEP
javascripthtmlcss
Robert
Robert

Reputation: 75

Display text when hovering over image

I'm trying to set up text to be hidden but when you over over an image the text shows up.

<img src="img/js.png" alt="Javascript" class="skill">
<p class="exp">Text goes here</p>

This is how my HTML is setup.

Is it possible to do this in CSS or do I have to do it in Javascript?

I'd rather not use jQuery.

Upvotes: 0

Views: 1962

Answers (5)

user2325727
user2325727

Reputation: 17

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 

    <!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Hope this helps.

Upvotes: 0

kavinhuh
kavinhuh

Reputation: 739

if you just want to avoid any jquery or javascript you can use

  <img src="img/js.png" alt="Javascript" class="skill" title="your name">

Upvotes: 0

misterManSam
misterManSam

Reputation: 24712

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

Adjacent sibling selectors

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

In this example:

  • 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.

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

Upvotes: 3

Sushovan
Sushovan

Reputation: 343

try this:

.exp{
  display: none;
}
.skill:hover + .exp{
  display: block;
 }

Upvotes: 2

Asit
Asit

Reputation: 468

Simply add this css code :

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

fiddle : https://jsfiddle.net/r3gyr9oh/

Upvotes: 3

Related Questions