Jump to content

Hover titles on gallery images squarespace 7.1

Recommended Posts

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.

Link to comment
  • Replies 26
  • Created
  • Last Reply
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Link to comment

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;

  }

 

Screenshot 2020-02-25 at 10.11.57.png

Link to comment

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

 

Link to comment

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

 

Screenshot 2020-02-25 at 19.35.06.png

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Link to comment
  • 3 weeks later...
  • 2 months later...

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. 

Link to comment
  • 7 months later...

Hi @tuanphan , I followed this thread and it works for me. I'm just trying to create a heading and a sub-heading (about a sentence worth) within my description though. Is this possible?? 

I've also noticed that if the gallery item is also a button, the anchor is not applied to the .gallery-item-description . Can the anchor be applied to this as well?

Link to comment
On 1/27/2021 at 3:30 PM, josiefish said:

Hi @tuanphan , I followed this thread and it works for me. I'm just trying to create a heading and a sub-heading (about a sentence worth) within my description though. Is this possible?? 

I've also noticed that if the gallery item is also a button, the anchor is not applied to the .gallery-item-description . Can the anchor be applied to this as well?

Hi. Do you still need help? Can you share site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Hi there I cannot get the Descriptions under My Gallery Grid to be a larger font size ...24px and have each description aligned to the proper photo in the center. Can you help me? 

 

professionalinsurorsokc.com/oklahoma-business-insurance-industries

Thanks!

Link to comment
On 2/23/2021 at 5:41 AM, ashersmom said:

Hi there I cannot get the Descriptions under My Gallery Grid to be a larger font size ...24px and have each description aligned to the proper photo in the center. Can you help me? 

 

professionalinsurorsokc.com/oklahoma-business-insurance-industries

Thanks!

Hi. Add to Design > Custom CSS

/* gallery title size */
p.gallery-caption-content {
    font-size: 20px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.