Make image appear on link hover css

The clean way to deal with it is to use :after pseudo element

a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
}

You don't even need the image to be present in the DOM.
Also remember that the path to the image will be relative to the CSS file, not the HTML file.

Of course, the image will push down the content below the anchor. To avoid this you can try:

a:hover {
    position: relative;
}
a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
    position: absolute;
    left: 123px; /* change this value to one that suits you */
    top: 56px; /* change this value to one that suits you */
}

Try putting the image within the href and giving a style of 'display: none'

Then:

a:hover img{ display: block; }

That should display the image when hovering on the

For background-image you need to give the anchor a width, height (or relevant padding) and display it as a block.

a:hover
{
    background-image: url('image/circle.PNG');
    background-repeat: no-repeat;
    background-position: center bottom;
    height:20px
    width:100px;
    display:block;
}