New to HTML and CSS, links are moving when hovered over

Question

I am trying to get 3 images that are also links to other pages, however when I hover over them, they jump out of place.

Any help?

my CSS looks like this for my second media query, and I would need it to inherit throughout.

#section_container_bottom figure {
    width: 100%;
    margin: 0 auto;     
    }

#section_container_bottom img {
    width: 25%;
    margin: 3%;
    }

#section_container_bottom img a:link, a:visited, a:active, a:hover {
        display: block;
        }

this is the HTML

<section id="section_container_bottom">
    <figure>
        <a href="javascript:void(0)"><img src="Sources/USE/latest-colors.png" alt="An overview of the latest colors available at Paint Republic"></a>
        <a href="javascript:void(0)"><img src="Sources/USE/inspiration.png" alt="Some inspiration provided by Paint Republic for you when looking to repaint in your own home"></a>
        <a href="javascript:void(0)"><img src="Sources/USE/color-expert.png" alt="Contact one of the color experts that are available through Paint Republic"></a>
        <div class="clear_float"></div>
    </figure>
</section>

Am I having a display issue with display:block?

Answer 1

please change following line of code in your css

CSS

#section_container_bottom a:link, a:visited, a:active, a:hover {
  display: inline;
}

Answer 2

CSS selectors need to be repeated after a comma.

#section_container_bottom img a:link,
#section_container_bottom img a:visited,
#section_container_bottom img a:active,
#section_container_bottom img a:hover {
    display: block;
}