Jump to content

Avery-Stock

Member
  • Posts

    6
  • Joined

  • Last visited

Avery-Stock's Achievements

Level 2

Level 2 (2/20)

0

Reputation

  1. I changed the word 'masonry' to grid in the CSS below but it did not work. .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; height: 10% !important; } .gallery-masonry-item:hover .gallery-caption-content { p.gallery-caption-content { font-family: LTC-Bodoni-160 !important; }
  2. Yes. I would like the captions to look like the ones below.
  3. Site URL: https://www.averyyoungphotography.com I am currently using the following code and it is working on some of my images but not on the new ones I just posted on my page. I just need help figuring out why this code is not working for those images and how to fix it. Thanks! figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; height: 10% !important; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,1); /* overlay color */ content: ""; display: block; position: absolute; height: 10%; /* overlay height */ left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } .gallery-masonry-item * { color: white; } /* remove gap */ figcaption { padding: 0 !important; } /* remove gap */ figcaption { padding: 0 !important; } p.gallery-caption-content { font-family: LTC-Bodoni-160 !important; }
  4. Thank you so much! If I wanted to move it the bottom of the picture and have a grey background, similar to https://www.oliviabossert.com how would I do that?
  5. Site URL: https://www.averyyoungphotography.com I would like to add captions to my images that only appear when you hover. Located on my homepage gallery (work), using a masonry grid - Just like https://www.oliviabossert.com Thanks!
×
×
  • 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.