Hi all, i’m working on my portfolio project and I’ve hit a little snag. How can I get the same hover effect I have on my image caption when I also hover over the image?
The HTML is set up like this:
<section id="projects" class="projects">
<h2 class="projects-header">< freeCodeCamp Projects /></h2>
<div class="projects-container">
<div class="projects-grid">
<div class="project-cell">
<a href="https://slamoureux.github.io/tribute-page/" target="_blank" class="project-tile">
<img src="images/tribute.png" alt="Tribute Page Project" class="project-image">
<p class="project-name">Tribute Page</p>
</a></div>
<div class="project-cell">
<a href="https://slamoureux.github.io/survey-form/" target="_blank" class="project-tile">
<img src="images/survey.png" alt="Survey Form Project" class="project-image">
<p class="project-name">Survey Form</p>
</a></div>
<div class="project-cell">
<a href="https://slamoureux.github.io/product-landing-page/" target="_blank" class="project-tile">
<img src="images/landing.png" alt="Product Landing Page Project" class="project-image">
<p class="project-name">Product Landing Page</p>
</a></div>
<div class="project-cell">
<a href="https://slamoureux.github.io/technical-doc/" target="_blank" class="project-tile">
<img src="images/tech.png" alt="Technical Document Project" class="project-image">
<p class="project-name">Technical Documentation</p>
</a></div>
</div>
</div>
</section>
And this is the current CSS:
.projects {
background-color: #eeeeee;
padding: 0 0 7rem 0;
}
.projects-header {
padding: 7rem 0 7rem 0;
color: #232931;
font-size: 3rem;
}
.projects-container {
margin: 0 auto;
}
.projects-grid {
display: flex;
flex-flow: row wrap;
}
.project-cell {
width: 50%;
padding: 1rem 3rem;
}
.project-cell :hover {
color: white;
}
.project-image {
max-width: 100%;
}
.project-name {
background-color: darkgrey;
text-align: center;
font-size: 1.3rem;
margin-bottom: 1rem;
padding: 15px 0;
color: black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
Here is the Codepen.
Edit: Another small thing I noticed is that when I resize my browser into the mobile size range my hover effect doesn’t work on my social media links and I have no clue why? All the others still work.
Thanks!