Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Alexg77

adding gallery block image descriptions on hover with css

Question

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

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 1
Posted (edited)

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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1
Posted (edited)

@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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1
Posted (edited)

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.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

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

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Whats the password?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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.

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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;

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...