Hover Effect when over image

Question

I think my classes or ID's are messed up when I try to call it.

CSS:

image#ply : hover .ply-text {
    visibility: visible;
}

HTML:

<image id="ply" style="height: 50px; padding:5px;" src="images.png">
        <div class="ply-text">
            <p>Click for more info!</p>
        </div>

Answer 1

Images use an <img> tag (not 'image') - that's important to note (as it hasn't been commented on so far). As remarked, you should remove the space between the id and the :hover in your css.

I would advise you remove the inline style and use css or at least add it into your id style/ add extra attributes as a class in the head of the body (css is better!).

In the style, you don't need image/img before the definition of your id, you can just leave #ply{your style} on it's own.

If you want to display the pic on hover, I would use display:block/none instead. Visibility just shows it if it's hidden. (I've done so in the snippet, run and see if it's the desired effect). Also, use an alt tag! I added one. If you want to show/hide the text you could use either but first you have to set the visibility to hidden or display to none... I added a class for ply-text on its own for this.

So your code would read

#ply {
  height: 50px;
  padding: 5px;
}
.ply-text{
   display:none; /* or visibility:hidden*/
}
#ply:hover +.ply-text{
   display:block; /* or visibility:visible*/
}

<img id="ply" src="images.png" alt="plyimage">
<div class="ply-text">
  <p>Click for more info!</p>
</div>

Hope this helps

Answer 2

Some issues first:

• The HTML element for embedding images is called img.
• An img element's content model is empty, i.e. it may not have any child elements.
• Even if those were not issues, you would not see the effect you're looking for since the text is already visible at the start.

Given that, here's a possible solution:

.ply-text {
    visibility: hidden;
}

#ply:hover ~ .ply-text {
    visibility: visible;
}

The ~ is a sibling selector that allows one to refer to an element following another.