In my code, I am working on creating multiple small boxes with images and centered text inside. The goal is to have these boxes clickable, where clicking the image will take you to a specific link. On desktop, I want a hover effect that darkens the image background when you hover over it, making the white text more visible. However, on mobile devices, the image background should always be darkened to enhance the visibility of the text.
The issue I am facing is that the "overlay" div within the anchor tag does not cover the entire width of the box (300px by 300px). This results in some space on both sides remaining undarkened when hovering over the anchor tag.
Below is a snippet of the code:
HTML for the projects section:
<!-- Projects Showcase Section -->
<div class="projects-section">
<div class="wrapper">
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
</div>
</div>CSS:
.projects-section {
width: 90%;
margin: 0 auto;
text-align: center;
}
.wrapper {
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.project {
/* Styles for project boxes */
}
a {
/* Anchor tag styles */
}
.project .overlay {
/* Overlay styles */
}
.overlay:hover {
/* Hover effect styles */
}
Here's an image showcasing the problem: https://i.sstatic.net/HlPln.png
There seems to be an issue where the overlay div does not fully expand to fit the anchor tag, leaving some space uncovered. Any help in resolving this would be greatly appreciated. Thank you!