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

Search the Community

Showing results for tags 'gallery captions'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges

Found 5 results

  1. Site URL: https://terrier-pelican-7hsm.squarespace.com Hey, would love some help please! I'm pretty new to Squarespace, and am trying to get my captions to hover over my images in a masonry gallery. I've been researching, and seems Squarespace 7.1 has only just allowed captions with galleries? I've used the below code, and the captions do appear. However, I really want the captions to be as a hover option over the image. Does anyone know how to do this? I've attached a screen shot of how the captions are currently showing on images. Been driving me crazy and would love some advice! Thank you! x figcaption.gallery-caption.gallery-caption-grid-masonry { position: absolute; bottom: 0; background: rgba(0,0,0,0.5); color: white; left: 0; text-align: center; img:hover }
  2. Hi Tuanphan, I am trying add a hover effect to a 'simple grid' gallery. On hover the image darkens slightly and a caption appears, which is great, but the way I have built this means you cannot now click on the link attached to the image. Can you help me please. I have used the code from the two great threads you have been involved with solving as the base: "Gallery Caption worksarounds for 7.1 - Round 1 & Round 2" ( This is the code as it stands, (excuse my annotations): body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-masonry .gallery-item-description { visibility: hidden; } //TEXT .gallery-item-description { font-family: urw-din-semi-condensed; font-size: 20px; color: white; text-align: center; } //OVERLAY? .gallery-grid, //.grid covers the simple gallery .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; height: 100%; bottom: 0; background-color: rgba(0, 0, 0, 0.75); padding: 25% 0% 0% 0%; box-sizing: border-box; } } .gallery-grid-item .gallery-item-description { visibility: hidden; opacity: 0; transition-duration: 0.75s; } .gallery-grid-item:hover .gallery-item-description { visibility: visible; opacity: 100; } .gallery-grid-item.has-clickthrough:hover { opacity: 0.5; } .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 { position: static; } .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); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } Thanks so much for your help. Oh, this is the version of the footer code you wrote in the previous threads: <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script>
  3. Site URL: https://www.bethlehemsynagogue.org/photos-archived Hi there everyone! Who's excited!? Squarespace made it possible to display captions on gallery pages! Woohoo! Wondering if anyone knows how to change the styling of gallery captions. Specifically the font and font size, but would also love to know how to change positioning, etc. Thank you in advance!
  4. Site URL: https://smilodon-ocelot-my5f.squarespace.com/lost-america Thanks to users on this forum, I've added gallery captions UNDER my galley images. However, when scaling the site, the images can cover the caption above them. Is there code to prevent this - maybe it needs percentage padding below the captions to override Squarespace's gallery settings? passcode: trythis (DESKTOP VIEW:) (SCALED DOWN TO OTHER MEDIA:)
  5. Site URL: https://smilodon-ocelot-my5f.squarespace.com/desert-modern Hi, How do I make all my gallery captions uppercase in the CSS code I've already added? passcode: trythis
×
×
  • Create New...