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

Search the Community

Showing results for tags 'caption'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • 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
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. I would like to make the caption on a gallery grid 2 lines and have the first line be bold. Can anyone suggest custom code to do this?
  2. Site URL: https://www.robertditty.com/ This might not be possible (or too complicated) but I would like there to be a text overlay when hovering on my images on my homepage. The Supply template does this ( https://supply-demo.squarespace.com/shop-supply?category=Apparel ) but I prefer Wells' wider sidebar. As an alternative, if there was a way for the caption to appear on hover in thumbnail mode that would be better than nothing. Or if there is an alternative to the gallery pages that allows this, let me know. Thanks!
  3. Anyone know how I can stop the captions from jumping from the left side of the page to the right when looking at the site on a small screen? it's hard to explain in words but check out: https://alison-shuman.squarespace.com/minarets-and-onion-domes if you see the caption on the left, make the browser window smaller. thanks in advance!
  4. Site URL: https://www.chriswgladden.com/about Hello, I'm trying to add a caption beneath a photo in an image box's card layout. The site is https://www.chriswgladden.com/about. I'd like the caption to be positioned as in the screenshot (made with Paint). Any help would be great... thank you in advance! Chris
  5. Site URL: http://www.chriswgladden.com Hello, I'm trying to add text to the bottom right of the banner photographs on the various pages of my site (www.chriswgladden.com). I've been trying to do this using spacers, but it won't align with the bottom and keeps messing up the rest of the text boxes on the page. The screenshot below shows an example of what I'm trying to achieve (I made this by adding text to a screenshot with Paint). If there was a way to easily place a text box on all banner images in that location, that would be great. Thank you in advance!
  6. Site URL: https://www.hellohome.co.nz/blog My image captions are displaying overlayed on mobile, and perfectly on desktop. I need custom CSS to get the captions on mobile to display below each image. However, I've tried a couple of things which seems to be messing with my footer and banners which are blocks controlled through CCS I think? Any help appreciated. Thanks
  7. Site URL: https://www.thebrattleboro.com/home-1 Hi there, I'm looking to use photos as buttons and I would love to have labels overlaying each one. I started with a packed gallery, but I am not sure what CSS I should add to have the captions overlay the images. I want it to look like the screengrab attached. Thanks in advance for your help! thebrattleboro.com/home-1
  8. Posting again because my original post is missing. I'm doing my first 7.1 site for an artist client who has a large portfolio of work. Since captions are not yet supported in the gallery or portfolio layouts, has anyone figured out a workaround? Or any way to mimic thumbnail image navigation? It's a requirement to caption the artist's images with the gallery, otherwise I may as well go back to a Brine layout. Thanks.
  9. Hi, I have a website with the Wexley template, and I'd like one of two things to happen when a user clicks on an image in a gallery on the page: 1) The click leads to another URL (clickthrough URLs are enabled) 2) The lightbox opens, but a caption appears under the image. Is either of these options possible? My site is www.dana-simmons.com Thanks!
  10. Site URL: https://gentlewisdom.squarespace.com/ Hello, I added some custom css to have an overlay appear upon hover of my image (attached screenshot). The caption text links to another page on my site. If the user clicks anywhere on this block I want it to link to the page, but right now only the text is linking despite adding a clickthrough URL on the image options window. I'm pretty sure this is because of the css to display a colored overlay over the image upon hover. Is there any workaround to get the whole overlay or image to link? Or is this just an either/or situation. Thanks for any help in advance.
  11. Site URL: https://crocodile-corn-gyyh.squarespace.com/2022 Hi All! Password: Opal240! On the top left image I've used this bit of code for the image block to have its caption fade to the background color with the caption centered: .image-caption-wrapper { min-height: 100%; display: flex; align-items: center; justify-content: center; background: #D7D3CA !important; } Since the caption now covers the entire image on hover I'm not able to click the image for the lightbox to pop up. The second image lightbox works since I have the caption turned off. Is there a way for the lightbox to still work? Thanks for the help!
  12. Site URL: https://jonathan-gaber.squarespace.com/work/bricks I was following this topic from a previous post but it seems my request for help got lost. As so many others, I am looking for a solution to show a caption in lightbox. The code below works but looks awful as it sits oddly on the art work. The other part of this is that I have added code to the caption to control bold and line breaks specific to art. If anyone can help I would be grateful and if anyone knows how to request this be added to 7.1 even better. Thank you! ------ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function createNodeCaption(textContent){ var divElement = document.createElement("div"); var pElement = document.createElement("p"); pElement.innerHTML = textContent; divElement.classList.add("style-gallery-lightbox-text"); divElement.appendChild(pElement); return divElement; } $( document ).ready(function() { var itemGallery = document.getElementsByClassName('gallery-grid-item'); var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item'); var countGalleryItem = itemGallery.length; for(var i = 0; i < countGalleryItem; i++){ if(itemGallery[i].getElementsByTagName('p').length != 0){ var text = itemGallery[i].getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .35em text-align: center; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: white; background-color: rgba(0,0,0,0.5); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style>
  13. I am trying to add the captions from my Gallery: Masonry to the Lightbox when it opens. Any tips on how to include the caption below the image?
  14. Hi I have added the below code to add captions on hover to my Gallery: Masonry. There are a couple of issues: 1. I want the font to be a bit heavier weight 2. When the caption runs to 2 lines, it is no longer centered - it suddenly left aligns. I'm not a coder, so any help appreciated! figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.75); /* overlay color */ content: ""; display: block; position: absolute; top: 0; 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; } /* remove gap */ figcaption { padding: 0 !important; .gallery-caption * { color: white !important; font-weight: bold !important; font-size: 50px !important; }}
  15. Site URL: https://oboe-oriole-p6l3.squarespace.com/ Hi there, I'm trying to make the heading & caption aligned on the left of the image hover in this gallery. I've attached an image of the current alignment vs my goal of alignment. I'd ideally like to be able to easily change the size, colour, format, padding, typography emphasis etc of the text within the coding too. I've attached images of all the current coding on the website, including the page itself, the images & under Design > Custom CSS. If anyone can assist me with figuring this out, I'd be very grateful! Thanks, Bell. WEBSITE LINK: https://oboe-oriole-p6l3.squarespace.com/ PASSWORD: milkcity
  16. Site URL: https://www.samgrayphoto.com/artist Is there a way to use the POSTER design of image without it making the image darker? Also, is there a way to make the text only show up when you hover over the image? Basically what I'm trying to do is make my caption in the center of the image when your mouse hovers over it, before clicking the image which will link you to another page. I was originally doing inline and choosing the "caption overlay on hover" choice but its so small in the left corner of the image. I want it to be in the center. Then I was giving up and choosing the stack option, but I feel like it will make my page look messy. TLDR: I want to upload images and have text in the center of the image when you hover over the image with your house, but I don't want it to change the color or brightness of the photo.
  17. I'm creating a home page with some linked images including captions below. The CSS below gives the images a hover effect, but nothing happens to the captions. Is it possible to give the cations a similar effect (or change color or something) at the same when the hover effect is activated? #block-40b84df9ad7a77f5ea51 { a:hover img { transform: scale(1.04); opacity: 0.8; transition: .4s } }
  18. Site URL: https://www.gerileung.com/ Hi! I'm customizing the caption hover on images but I'd like for the title of the caption to be visible only and then on the hover have the rest of the caption to appear. I thought I could target the h4 class directly and set visibility to visible but that didn't work. Is there another way to do this? See the attachments for what is on the site now and what I'd like to do. Thanks!
  19. Site URL: http://www.delmialvarez.com Hi all, As documentary photographer I need that captions of images in the galleries are below the image and not in the left corner below. Appreciate your help for a CSS code. All the best
  20. Site URL: https://fennel-porpoise-ttfg.squarespace.com Hi guys, I am absolutely new to building websites and I have absolutely no idea about coding but since Squarespace support sent me here, you guys are my last hope. To get to the website here is the password: slhkAB2021 The problem is: The desktop view of the start page is great. The group photo with the white gradient on the left, so that the headline can be there, fits perfectly. Unfortunately, when I open the mobile view, the blue headline jumps to the group photo and so of course is no longer readable. Is there a way that the heading color is adjusted only for the mobile view? So is there a code that specifies that the color adjusts depending on the pixel size? So that it is not blue in the mobile version, but white? Then you could see the group picture and the headline. I really hope there is a solution to this. Thanks in advance!
  21. Site URL: https://www.yespeach.com.au/ Hi, I'm trying to recreate this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade Currently I can sort of get it. However when my fade comes in it fades my text as well. Here is what I have... figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 9.75; } .gallery-masonry-item * { color: white; } /* remove gap */ figcaption { padding: 0 !important; } /*text color size in masonry gallery*/ .gallery-caption * { color: #000000 !important; font-size: 30px !important; text-align: center; } /*creates opaque rollover effect for regular image blocks*/ .gallery-masonry-item:hover { background-color: #525a5c; opacity: 0.3; transition: all .5s ease-in-out;}
  22. 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!
  23. Site URL: https://flute-cello-9kz2.squarespace.com/ I am using a custom CSS to put the caption directly on top of the image but the problem now is the image/caption aren't clickable. They are supposed to link to other pages on my website. I am talking about the "Featured Neighborhoods" on the homepage. Can someone help? Thanks! EDIT: NVM SOLVED
  24. Site URL: https://www.afor.studio/work Hey all, Is it possible to align my Gallery captions to the left Grid on desktop view? Eg. So it lines up with my header logo. I've attached a screenshot of how it looks and where I would like it to be. Cheers, Alex
  25. Hi- Looking for the code to adjust text size of gallery caption on mobile only. Ty!
  • Create New...