I am struggling to create 3 images that double as links to other pages. However, whenever I hover over them, they seem to shift out of place.
Can anyone offer some guidance?
This is my CSS code for the second media query, and I want it to be applied universally.
#section_container_bottom figure {
width: 100%;
margin: 0 auto;
}
#section_container_bottom img {
width: 25%;
margin: 3%;
}
#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;
}
Below is my HTML structure:
<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>
Could the issue lie with the display property being set to block?