Emilyperelman
New Coder
Hello! I'm a bit of a newbie to HTML & CSS so I'd appreciate all the help I can get. I'm currently building a website on Cargo and have customized the CSS so that image captions appear when an image is hovered on. The issue I'm having is that when I hover on an image, the caption for that image appears, but so does the caption for every single other image in the gallery. I would like so that when an image is hovered on, only that images caption will appear and the others will stay invisible. Looking forward to hearing any advice!
CSS:
.gallery_image_caption {
background: rgba(255, 255, 255, );
padding: 0.5rem 1.2rem 0.7rem 1.2rem;
margin: 2.4rem;
color: rgba(255, 255, 255, 1);
align-content: center;
font-family: "Space Mono";
position: absolute;
left: 0;
bottom: -0px;
z-index: 9;
opacity: 0;
transition: opacity .3s ease-in-out;
font-style: normal;
font-weight: 500;
font-size: 30px;
}
.content:hover .gallery_image_caption{
opacity: 1;
}