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

Hover titles on gallery images squarespace 7.1

Question

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.

Share this post


Link to post

20 answers to this question

Recommended Posts

  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0
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?

Share this post


Link to post
  • 0
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?

Edited by jacquelineu

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

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. 

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