Jump to content

Sugar

Member
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Sugar

  1. This is for 7.1 I found a code for my portfolio gallery that offers a nice alternative to have the caption pop-up at the bottom of the image as hover/overlap with a nice transparent background. The caption only pops-up when the mouse is over the image and no longer appears below the image. I am using the Grid:strip gallery, and it lets my portfolio images keep their shape while not having to sacrifice the title of my work. However that being said, I still have not found a successful code to have my caption show up below my image in the Lightbox. In case anyone is curious about the gallery caption hover, I used her code and she included images: https://beatrizcaraballo.com/blog/simple-hover-gallery-strips-7-1 I made two changes her code because I did not like how much area her overlay covered or her font used. To make the overlay cover less simply change padding size (she originally used padding: 20px 50px, I prefer the padding: 2px 2px) As for the font, I simply removed her font & size by leaving this blank which will leave the font to customise with my page font themes - this what I used: font-family: ''; font-size: ; font-weight: ; text-transform: ; She originally had (in case you want to customise): font-family: 'Lato'; font-size: 15px; font-weight: bold; text-transform: uppercase; Add the code below to Design >> Custom CSS >> (not the header or footer) If there is custom CSS in there already just add this code below that one /*CREATING A SIMPLE HOVER MODE FOR GALLERY STRIPS IN 7.1*/ .gallery-caption-grid-strips { background-color: rgba(255, 255, 255, 0.7); box-sizing: border-box; padding: 2px 2px; max-width: 100%; pointer-events: none; position: absolute; bottom: 0; text-align: center; transform: translateY(100%); transition: transform .3s; } .gallery-section .gallery-caption.gallery-caption-grid-strips p { font-family: ''; font-size: ; font-weight: ; text-transform: ; } .gallery-strips-item { overflow: hidden; } .gallery-strips-item:hover .gallery-caption-grid-strips { transform: none; }
  2. Site URL: https://sugarofoz.squarespace.com/portfolio/page1 This is such a common issue but I can not seem to resolve it In my portfolio, I only want the caption to show up below the image in Lightbox only. I do not want any captions below the image in the gallery (I am using Grid:strip). I link the first page of my portfolio and you can see the captions show below the image. I only have selected images with captions, not all. So far every code I have tried has not worked, please help!
  3. This code does not work and only hides the caption, it does not display it in the Lightbox as other have mentioned.
×
×
  • 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.