I have a hover effect creating a label over an image that is also a hyperlink to a separate website, however, the hover effect CSS styling is blocking my HTML hyperlink to the other site.
I have the image aligned with multiple other images in a section of my current project, whenever I alter the div to create the link, it misaligns the from the center.
Is there a quick fix that allows me to keep my image centered within CSS Grid and also allows the entire <div class="big-image">to be the hyperlink instead of just the image behind the label?
Here are the codeblocks for reference :
#projects{
background-color: var(--main-bg-color);
/* Test color: #D7D427 */
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;
}
#work-title{
grid-column-start: 2;
grid-column-end: 3;
}
.img1{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
max-width: 100%;
max-height: 100%;
}
.img2{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.img3{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
max-width: 100%;
}
.img4{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
max-width: 100%;
}
.big-image{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
max-width: 100%;
}
/* Image Borders */
.img1 img, .img2 img, .img3 img,.img4 img, .big-image img{
border: 3px solid var(--blue-border);
border-radius: 25px;
}
/* Image/Project :hover effects for Labels */
.big-image {
position: relative;
}
.big-label{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: var(--primary-color);
font-family: Verdana, Geneva, Tahoma, sans-serif ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
border-radius: 25px ;
transition: opacity 0.25s;
/* pointer-events: none; */
}
.big-label > *{
transform: translateY(20px);
transition: transform 0.25s;
}
.big-label:hover{
opacity: 1;
}
.big-label:hover > *{
transform: translateY(0);
}
.big-label-title{
font-size: 2em;
font-weight: bold;
}
.big-label-description{
font-size: 1.25em;
margin-top: 0.25em;
}
<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>