How to change caption text when hovering over image?

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">&#60; freeCodeCamp Projects &#47;&#62;</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!

Try applying hover effect on a tag instead

Your portfolio looks great!
Select what you want to hover and then what is changed when hovering.
Here’s an example: https://codepen.io/cokopoof/pen/XWbLdyj

1 Like

I tried to use your example, which I think translates into:

.project-cell:hover a {
     color:  white;
}

In my case and it doesn’t work. I’ve tried using every combination I can think of with different tags but I’m stumped.

I’m also a little confused on why .project-cell:hover doesn’t work to change my caption text but if I put a space and use .project-cell :hover it does.

Since the image and caption are both part of the same anchor tag I would like the text to change color when the image is hovered over instead of just the caption box.

.project-cell:hover selects the element with that class name while .project-cell :hover will select children elements of that class name, more info here.

I think the reason .project-cell:hover a selector isn’t working how you want is because theres another more specificly selected element with a color property overwriting it.

Try playing around in the developers tools (f12) in your browser if you aren’t already, you can inspect different elements and see what styles are being applied and which ones are being overwritten.

1 Like
.project-cell:hover p {
  color: white;
}

or

.project-cell:hover .project-name {
  color: white;
}

However, this includes the padding on the .project-cell for the hover. You likely want the hover on the .project-tile instead.

.project-tile:hover .project-name {
  color: white;
}
1 Like

Ah there it is! Thanks it was driving me nuts. I was heading in that direction but could’t quite get there.