I am encountering an issue with a CSS hover effect on an image that is also a hyperlink to another website. The CSS styling for the hover effect seems to be interfering with the functionality of the HTML hyperlink.
The image in question is aligned with other images within a section of my current project, and when I try to turn the entire
<div class="big-image">Is there a solution that will allow me to maintain the centered position of the image within CSS Grid while making the entire
<div class="big-image">Referencing the following codeblocks:
#projects {
background-color: var(--main-bg-color);
display: grid;
grid-template-columns: 1.25fr 2fr 1.25fr;
grid-template-rows: 10% 1fr 1fr 1fr;
margin: 0;
box-sizing: border-box;
justify-items: center;
align-items: center;
}
...
<a href="https://mberti13.github.io/run-buddy/">
<div class="big-image">
<img id= "big-image" src="./assets/images/run-buddy-photo.jpg" width="500px" height="350px" alt="Website built for Run Buddy Inc. Made Using HTML and CSS">
<div class="big-label">
<div class="big-label-title">
<h3>Run Buddy</h3>
</div>
<div class="big-label-description">
<h5>HTML, CSS</h5>
</div>
</div>
</div></a>