adding gallery block image descriptions on hover with css

Site URL: https://okra-swordfish-w2kf.squarespace.com/

I'm trying to enable image descriptions to appear atop the center of each image upon hover. While I've managed to create a nice ease in/ out effect with making the image slightly more white (essentially so the text can stand out), I can't seem to get description text to appear on each image with the hover. I've gone through a number of threads, but for some reason every version of code I've found isn't working for me. To note, I need to maintain clickthrough abilities, as each image links to its own respective project page 

I'm working with a gallery block, simple grid on Squarespace 7.1. Here's the code I have so far: 

//IMAGE BACKGROUND ON HOVER
figure.gallery-grid-item .gallery-grid-item-wrapper:before {
    background-color: white;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all 0.5s;

}

figure.gallery-grid-item:hover .gallery-grid-item-wrapper:before {
    opacity: 35%;
    transition: all 0.5s;
}

Do I add something to this specific segment of code, or is there a different block of code I should add for the descriptions to also appear on the hover? I'm new to CSS and would be so grateful for some insight! 

With gratitude!

Alex

Whats the password?

@rwp

Thanks for reply! 

Password: Asg77!

Page/ image block is currently at: https://okra-swordfish-w2kf.squarespace.com/film

The simplest solution that I have found is to add text to the <a> tag, position it, and then make it hidden and visible on hover.

You will need to remove your CSS, it is causing issues with the click through.

The downfall, you have to enter the text manually, and do each one in the css. something like this.

figure:hover .gallery-grid-image-link::before {
  opacity: 1;
}

.gallery-grid-image-link::before {
  opacity: 0;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  transition: opacity 0.5s;
}

figcaption.gallery-caption.gallery-caption-grid-simple {
  display: none;
}

figure.gallery-grid-item.has-clickthrough:hover img {
  opacity: .7;
}

figure.gallery-grid-item.has-clickthrough img {
  transition: opacity 0.5s;
}

/* THIS NEEDS TO BE DONE FOR EACH LINK */
.gallery-grid-image-link[href="/cuttlefish"]::before {
  content: "Cuttlefish";
}

@rwp Amazing! This works beautifully! Thank you so much!! The manually adding of each project name is no problem at all -- and this also gives me a pretty straightforward way of adjusting the text/ hover effect as needed. Huge thanks!!

@rwp

Sorry, quick follow up as I play with styling -- 

• First, I increased the font size and moved the text to the bottom right of each photo, but now the project titles are beginning outside the frame. I tried to insert a "text-align: left;" line but that didn't help much, and when I tried "margin: 0px 75px 20px;"  it made the alignment inconsistent across titles. Do I modify the numbers in the transform? How do I ensure the titles are contained within the parameters of the image? Screengrab below. 
• Second, for mobile/ tablet, what else will I need to adjust outside of "font-size" to ensure the alignment is consistent? And the hover effects would take place on the tap, I imagine. 

Latest code, below (my tweaks in orange)-- 

//film hover titles
figure:hover .gallery-grid-image-link::before {
  opacity: 1;
}

.gallery-grid-image-link::before {
  opacity: 0;
  z-index: 999;
  position: absolute;
  top: 75%;
  left: 25%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  transition: opacity 0.5s;
}

figcaption.gallery-caption.gallery-caption-grid-simple {
  display: none;

}

figure.gallery-grid-item.has-clickthrough:hover img {
  opacity: .85;
}

figure.gallery-grid-item.has-clickthrough img {
  transition: opacity 0.5s;
}

/* THIS NEEDS TO BE DONE FOR EACH LINK */
.gallery-grid-image-link[href="/cuttlefish"]::before {
  content: "cuttlefish";
    font-size: 150px;
   margin: 0px 75px 20px;
}
  
.gallery-grid-image-link[href="/undercovered"]::before {
  content: "undercovered";
  font-size: 150px;
}
.gallery-grid-image-link[href="/howdoyouknow"]::before {
  content: "how do you know";
  font-size: 150px;
  line-height: .9em;
}
.gallery-grid-image-link[href="/fried"]::before {
  content: "fried";
  font-size: 150px;
}

I'll have to check from a computer, but don't use margins.

Replace top and left, with bottom and right. Bottom 0 and right 0 will be the bottom right corner.

@rwp got it, thanks. Swapped "top" and "left" with "bottom" and "right" and now it's all wonky -- the adjustments only seem to work for first project description text, and subsequent project type isn't changing. Thanks again for your help. 

@Alexg77 Take out the 5 lines that have the translate setting. That was to get it centered before.

Also, you have one lower than the rest because of the line-height tag.

If you want to move them around increase the bottom and right.

If you used bottom: 50px; its basically saying 50px from the bottom.

@rwp Got it, thanks, that worked!

And then for mobile, I tried the following, but it's not working. I think the issue is with how I'm identifying the caption text, but what should I swap in instead? Thanks so much for your patience here! I'm clearly a real newbie... 

@media only screen and (max-width: 725px){.gallery-grid-image-link[href="/cuttlefish"]::before {
  content: "cuttlefish";
  font-size: 30px;
  }

Don't set the font on each one, unless you specifically need them to be different sizes.

I would do it dynamically.

Find this block of code ".gallery-grid-image-link::before {"

and add in font-size: 6vw;

That would be in the same section that you removed the translate codes from.

Remove the font size 150 in all of the other ones. 6vw will dynamically size with the screen width. You can make it bigger or smaller, 5vw, 7vw, etc, you can also use decimals, 6.5vw.

Essentially, do as little coding to each item as possible. Unless you specifically need one different than the other, the only thing in the href blocks should be the content.

You can also give it a nice outline, to give some seperation

text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000;

@rwp Thanks again for all of your amazing help with this. I'm still playing around here, and while I've swapped out "opacity" for alternatives like "brightness" or "contrast" in the latter half of the code for figure.gallery-grid-item, I can't seem to figure out how to basically reverse the image fade hover effect. So rather than becoming slightly more transparent on the hover, I think I'd alternatively like it to either be at full opacity on the hover (and maybe like .85 opacity in default state) OR have images at full opacity at default state and then get slightly darker on the hover. I realized I need a little more contrast against the white title text that appears. Any suggestions? Thanks again for your patience and time here!! 

Site: https://okra-swordfish-w2kf.squarespace.com/film  // PW: Asg77!

Current code is: 

//film hover titles
figure:hover .gallery-grid-image-link::before {
  opacity: 1;}

.gallery-grid-image-link::before {
  opacity: 0;
  z-index: 999;
  position: absolute;
  bottom: 0%;
  left: 3%;
  color: white;
  transition: opacity 1s;}

figcaption.gallery-caption.gallery-caption-grid-simple {
  display: none;}

figure.gallery-grid-item.has-clickthrough:hover img {
  opacity: .85;}

figure.gallery-grid-item.has-clickthrough img {
  transition: opacity 1s;}

/* THIS NEEDS TO BE DONE FOR EACH LINK */
.gallery-grid-image-link[href="/cuttlefish"]::before {
  content: "cuttlefish";
    font-size: 7vw;
}
  
.gallery-grid-image-link[href="/undercovered"]::before {
  content: "undercovered";
  font-size: 7vw;
}
.gallery-grid-image-link[href="/howdoyouknow"]::before {
  content: "how do you know";
  font-size: 7vw;
}
.gallery-grid-image-link[href="/fried"]::before {
  content: "fried";
  font-size: 7vw;
}

Sure.

To make them darker go from full opacity to darker. Leave the code exactly how it was but make the background black.

All opacity does is make it see though, so a white bg makes it look lighter.

.gallery-grid-item.has-clickthrough {
    background-color: black;
}

To make it normally .85 and 1 on hover, you need to change this to opacity 1.

figure.gallery-grid-item.has-clickthrough:hover img {
  opacity: .85;
}

and add this

figure.gallery-grid-item.has-clickthrough img {
  opacity: .85;
}