Hover titles on gallery images squarespace 7.1

Gallery with title, use this. After you create gallery with title, share url, We can check code to create hover effect

@tuanphan I have tried adding the above code but it doesn't do anything to the gallery on the home page.

URL: https://lanternfish-eagle-2flj.squarespace.com/

PW: 20244088

1 minute ago, Leanie said:

@tuanphan I have tried adding the above code but it doesn't do anything to the gallery on the home page.

URL: https://lanternfish-eagle-2flj.squarespace.com/

PW: 20244088

Have you added description when uploading images yet?

@tuanphan yes I have -see screenshot.

This is just a test, wanted to see that it works before I upload my final files.

2 minutes ago, Leanie said:

@tuanphan yes I have -see screenshot.

This is just a test, wanted to see that it works before I upload my final files.

 

Which code did you insert, in the link i sent above?

@tuanphan This code (as per your link):

body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: black;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2% 6%;
    box-sizing: border-box;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    min-height: 60vh;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 1em;
  padding: 1em 2em;
  background-color: rgba(225, 225, 225, 1);
}

3 minutes ago, Leanie said:

@tuanphan This code (as per your link):

 

 

You need to use both css (you inserted) + script code

Hi @tuanphan

Below is the code I am currently using. The descriptions now appear on each gallery item in the correct font and position. How do I now create a hover effect?

body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
  font-family: granville, serif;
  font-size: 30px;
  color: black;
  text-align: center;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
       top: 50%;
    width: 100%;
    bottom: 0;
padding: 0% 0%; 
    box-sizing: border-box;

  }

.gallery-item-description {
    visibility: hidden;
}
figure.gallery-masonry-item:hover .gallery-item-description {
    visibility: visible;
}

@tuanphan thanks, that works perfectly!

One more question. I would also like to add transparency to each image as part of the hover state.

The below code seems to work, but only affects one image in the gallery. How do I apply it to all of the images?

}
.gallery-masonry:hover a img {
  opacity: 0.4!important;
}

@tuanphan I have used the below code you suggested in a previous forum to add transparency to images as part of the hover state,

but this affects the text as well. Is there any way to get around that so that the text doesn't loose any opacity?

figure.gallery-masonry-item.has-clickthrough:hover {
    opacity: 0.5;
}

try this

figure.gallery-masonry-item.has-clickthrough:hover img {
    opacity: 0.5;
}

fantastic, that works! thanks!

On 2/24/2020 at 9:53 AM, tuanphan said:

Which code did you insert, in the link i sent above?

Hi, I am following all of your steps and it is still not working for me 😞 I cant figure out what I am doing wrong. Can you help?

1 minute ago, jacquelineu said:

Hi, I am following all of your steps and it is still not working for me 😞 I cant figure out what I am doing wrong. Can you help?

Can you share link to gallery on your site?

30 minutes ago, tuanphan said:

Can you share link to gallery on your site?

https://dragonfly-porcupine-n37k.squarespace.com/config/pages

Thanks for the quick reply!! I actually got it to work but I want to change the font. How do I make sure the the caption is on top on the additional transparency code?

Also, how do I only apply this to certain galleries?

21 hours ago, jacquelineu said:

https://dragonfly-porcupine-n37k.squarespace.com/config/pages

Thanks for the quick reply!! I actually got it to work but I want to change the font. How do I make sure the the caption is on top on the additional transparency code?

Also, how do I only apply this to certain galleries?

Can you check again url?

/config is url for site owner

On 2/24/2020 at 3:54 PM, Leanie said:

Hi, 

I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css.

(I want to use a masonry gallery as my landing page that clicks through to each project).

Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares.

Hello — I'm following this post mainly to understand how to force an index / project page to act like a masonry grid (automatic aspect ratio on thumbnails).
I see you've managed to make it work on your site but I don't see the workaround / code for it in this thread.

can you share you did it eventually?
thank you in advance

Givan

This reverts the old gallery options incredibly easily. https://www.ghostplugins.com/steps/9ehnk49g

Hi, 

I too like the others here on the forum am trying to have the captions show up on hover for the images laid out using the Grid Masonry style. I appreciate you helping me with the CSS code as my working knowledge of coding is quite limited. So any or all help will be great! Do let me know what I need to provide you with in order for you to respond back. Thank you in advance.