Hover Effect when over image - html

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

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.

Answer 2

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