Jump to content

adding gallery block image descriptions on hover with css

Recommended Posts

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

Link to comment

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";
}

 

Edited by rwp
Link to comment

@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;
}

 

Screen Shot 2020-07-17 at 12.43.30 PM.jpg

Link to comment

@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.

Edited by rwp
Link to comment

@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;
  }

Link to comment

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.

Link to comment
  • 3 weeks later...

@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;
}

Link to comment

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;
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.