Image caption overlay on hover squarespace css. 1 doesn't support gallery hovers.

Image caption overlay on hover squarespace css Answer within 24 hours. image-caption selector. My Site Password: thefalcon Any ideas? Many thanks, Martin Jul 14, 2022 · Next, when adding Image Title, use this format Result Gallery Grid – Hover Image – Show Title + Overlay First, add Gallery Images + Titles Next, add this code to Design > Custom CSS Aug 4, 2025 · Caption Overlay - Caption displays over the image in a dark gray bar. Next, use this code to Custom CSS box figure. #1. Also check out: Image Overlay Slide, Image Overlay Zoom, Image Overlay Title and Image Overlay Icon. Oct 25, 2022 · Hi, I am trying to create a text on hover after darkening (or if possible blurring) the image underneath. I don't want the captions to appear underneath each image, but rather on top inside the image container div, like at the bottom right for example. The code I've pulled from a tutorial works well for this, however I've now lost the clickthrough link on the image underneath. Anyone have a recommendation? Nov 18, 2024 · Learn how to create hover text in Squarespace with this easy guide! Add Squarespace hover text, reveal text on hover, or create a text overlay on images in minutes. Jan 26, 2021 · Hello! I have no experience in CSS but I've been finding some code via web searches to customize my site. image-block-outer-wrapper. Feb 7, 2023 · Here's my guide on how to create a unique hover and text reveal effect on Squarespace. gallery-masonry-item:not (. So, if you add a link in the caption you could style to look like a button. Apr 25, 2025 · I've applied a caption overlay on rollover to the images in my gallery using CSS. I am familiar with custom CSS, and have been using it on my portfolio template, however I can't figure out how to make this happen. By layering text on images, designers can create engaging and visually appealing websites that capture attention. Basically the same thing that works well on the Portfolio page. Oct 16, 2024 · Learn how to create custom hover effects for your Squarespace image blocks in this free code tutorial from InsideTheSquare. Also as a side question, would it be possible to add multiple lines of text the to the image descript Nov 18, 2024 · Learn how to create hover text in Squarespace with this easy guide! Add Squarespace hover text, reveal text on hover, or create a text overlay on images in minutes. First, you need to enable Gallery Caption #2. This step-by-step guide provides clear instructions on creating hover effects, helping you make your site more engaging and visually dynamic. Apr 18, 2024 · Hello, I would like to add a hover effect on the image block to display the project title. Jun 3, 2021 · I'd like to display video captions on hover instead of below the video. I've been searching everywhere for this code and have managed to find code that darkens the images but doesn't show the link title. Sep 6, 2024 · In this tutorial, I'll break down the basics of Squarespace hover effects with custom CSS. com Hi! I've added CSS to my Image Blocks with the Caption Overlay (hover) effect to have a transparent overlay on the images. Or if there is an alternative to the gallery pages that allows this, let me know. I have actually implemented this in another website, but the same code is not working for the website I am currently customizing. However, now the images are no longer clickable/linkable. I attached a reference on what Jun 4, 2020 · Hey - I have 9 images on a page and I'm trying to get a hover effect which fills the entire image, but it's only covering the top 75% - any help would be appreciated as I'm not a CSS whizz! This is the code I am using at the moment: . intrinsic . The text is static (does not disappear or appear on hover), and I want an opacity effect to show on hover to indicate the image is a clickable link. Jan 9, 2016 · How do I change change the hover overlay to cover the entire image and also center the text within in? Here's how to looks with the text at the bottom. May 26, 2022 · /* Masonry hover */ [data-section-id="627ecc448851d864ffb7543e"] { figure. com Thanks! Aug 18, 2020 · Hello all, I'm trying to add an image hover effect on my 7. 1 doesn’t support adding a colour overlay hover effect to image blocks or gallery section images, I'm looking to recreate a simple white or grey opacity overlay on hover for all project images or thumbnails across my site. Jun 10, 2020 · Site URL: https://www. com/ I have used a code to create an overlay caption to appear on grid gallery images whilst hovering however I Mar 17, 2025 · Hi everyone! I need help figuring out how to adjust the CSS so I can get the multi-color hover state effect I'm using on my portfolio grid here to work on the Masonry Gallery style page. Dec 30, 2022 · I'm building a website and want to add caption overlay to some images so when I hover the cursor over them they change color and captions appear (within these same images I would like to add links to videos as well) Sep 17, 2024 · Hi, I am trying to add some caption overlays to the images in a masonry gallery as currently displayed on my home page. image-block-outer-wrapper:not (. Click Enable Caption #4. Is there a way to do this, perhaps with an overlay color so the captions are more visible? I'm attaching an example from another site. Jan 21, 2021 · Hello, I have a gallery grid with an overlay on hover to display the caption on each image. I'm not sure if I can do it on 7. I'm by no means a CSS expert, so I've been compiling code from different forums, and put together this: Apr 23, 2025 · To make text/overlay appears on hover Gallery Strips Image, you can follow these. com/work/overview I had found the image Zoom-on-hover code, but also want to add a hex color overlay over the entire image (and control its opacity level) and then add text on top o Jan 11, 2025 · Designing with overlays in Squarespace opens a world of creative possibilities for web creators. 1 doesn't support gallery hovers. Dec 28, 2021 · @tuanphan @creedon moreover, im trying to figure out how to properly credit on mobile since there is no hover. The issue now is that the links don't click though anymore. Next, find Masonry ID. I would be grateful for the CSS for this? Thanks Apr 13, 2022 · On 4/18/2022 at 8:04 AM, ChrisF07 said: Can you also share how to remove the overlay and text on hover? You mean: show text/overlay initial then hide it on hover? Email Me or message me (Facebook) if you have need any help (free). With step-by-step instructions, you’ll learn how to create different types of hover effects for your buttons and images, making your website even more dynamic and fun to interact with! Jan 7, 2023 · When I was on the 7. And this tutorial will teach you how to create that hover effect Aug 14, 2020 · Hi all, I've been trying to put together some custom CSS to give my images a rollover effect in which the captions appear on top of the image with a dark overlay (shown in the attached images). Jun 17, 2020 · Site URL: http://www. Does anyone know of a good CSS tutorial I could follow to ach Aug 21, 2023 · I was hoping someone could come up with a code to do the following: make the captions appear on a gallery slideshow: reel images, on hover each image should zoom in, the text should appear and I also want the image to have an overlay effect on hover. Hover over an image - see some text. relead. I know it's possible to create a link with the caption text itself, however I would like the entire image to be clickable. com/) Aug 28, 2021 · The gallery section feature in Squarespace 7. Jan 24, 2022 · How about if I want the image is overlayed by a color (#000000) at the first time, with opacity 50%, text on top, and after hover, I want it to turn into the original image overlayed by color (#F123A4), text is disappeared before and after hover? Jun 11, 2024 · Hi! I've added CSS code to have captions appear while hovering over each gallery image, but when I add links a nasty overlay appears. I want to switch my main portfolio page to the Masonry gallery style, and link the individual images to each p. Below could be a good starting point to override the styles and get Feb 1, 2020 · Images attached are of my new website. 1 You and your clients can now add captions to gallery section images for all gallery layouts. ** This code has now been upda Mar 29, 2021 · How to add a hyperlink to the gallery caption overlay/hover effect (whole image)? css custom-css charlineca Jan 17, 2023 · Hi I'm trying to create a hover overlay on all image blocks within my site. gallery-masonry-item figcaption { position: absolute; top: 50%; left: 50%; transform: tra Nov 11, 2025 · Hello! I am trying to figure out how to hide my image captions from hover and also when the page is loading. gallery- Sep 10, 2020 · When I use the hover caption mode for image blocks, the caption appears on hover at the bottom of the image on a dark/back background. This code is intended to work o This tutorial will guide you on how to show Gallery titles as an overlay on hover in Squarespace. But sometimes it looks better to have the image captions appear on hover instead of being displayed below the image. Nov 11, 2020 · Hey folks, hoping you can help me out with coding a hover effect like this. Jul 15, 2025 · When the user hovers over an image (see screenshot attached for reference), a semi-transparent dark overlay should appear. Would like to replicate a feature similar to this site where when you hover over the image, the text is hidden until you hover over the image then it appears below left aligned See reference here I know you are able to do hover overlay on the portfolio page but I would prefer to Jan 13, 2021 · Squarespace Webinars Free online sessions where you’ll learn the basics and refine your Squarespace skills. Image Caption Overlay on Hover (Stlye 1) Examples Below Below are working examples of the Image Caption Overlay on Hover 1. Oct 18, 2024 · In this article, we will guide you on how to add gallery captions in Squarespace. Definitely the MVP! Mar 24, 2022 · Hi, You want Initial: Show image, hide text Hover: Show overlay, show text over overflay, learn more is clickable Is this right? Add to Design > Custom CSS /* Masonry hover */ body#collection-62186458656e122368cb6bad, body#collection-6218647946766907c24701d3 { figure. 1 using the Grid:Simple Portfolio page where the title shows directly underneath the image. list-item img { transition: all . I used the c Jun 21, 2022 · As an alternative, if there was a way for the caption to appear on hover in thumbnail mode that would be better than nothing. Follow the simple CSS code guide here. Sounds simple right? Well thanks to CSS, it totally is. Jul 13, 2021 · Site URL: https://saffron-butterfly-a26f. My issue: the code I have allows a capion on hover, but then the cli Aug 14, 2020 · I am on squarespace 7. You can see the text overlay and on the second image, you can see the hover effect. Jun 22, 2020 · Site URL: https://gentlewisdom. On my template (the Ahmir Miller), I am trying to get a text overlay on each Home Page photo as you hover, BUT the only "overlay" option offered is at the bottom and there is no way to edit the p Mar 15, 2022 · In this week's video, we'll be looking at the steps behind creating a hover mode for anything you want in Squarespace. Mar 20, 2024 · Using Squarespace 7. 1 is a great way of display a collection of images. Next, add some text to Caption/Description #3. com Hello, I have a series of images with Caption Overlay on Hover on my home page, which I've managed to change the size of the overlay (previously covered 1/4 the lower portion of the image on hover) to cover the full width of the image, using the . This works on the main portfolio page, but it does no Aug 1, 2022 · Add an image block to your page in Squarespace Add your image to the edit box that pops up Below the image in the pop-up box, click the drop-down menu to the right of where it says “Caption” Select the option “Caption overlay on hover” Now click on the actual image block itself, and you will see the overlay bar appear at the bottom of May 15, 2020 · Site URL: https://fortheloversphoto. image-caption-wrapper { Oct 13, 2023 · Hi, I haven't seen anything yet to help for this and would appreciate any help for my portfolio site. Captions can enhance the user experience by providing context or additional information about the images in your gallery. Or if it is possible to have simply a text over image on a gallery block, that could be perfect! How can I do that on SQSP 7. image-caption-wrapper { opacity: 0; text-align: center !importa Apr 28, 2023 · Hi, I'd like to create hover states over image blocks as shown on this site (likely not an SS site): https://native. As other users have noted, it seems like something in the code is disabling Sep 21, 2020 · Site URL: https://mouse-trout-epjy. I tried injecting custom css into the page itself but it is not working. I have added some custom CSS so that hovering over images in a Grid: simple gallery will make captions and a colour overlay appear. layout-caption-overlay-hover . Dec 17, 2024 · Learn how to add professional gradient overlays to Squarespace page section backgrounds using custom CSS code. gallery-caption-grid-simple { p { font-size: 110%; font-weight: 500; } } Currently I am using css in squarespace to try and make image captions cover the entire image on hover, but because of some of squarespace's code I can make it cover the bottom portion of the image. Everything working ace EXCEPT, when the caption copy runs over to two lines, it changes from center to left align 😞 Here's the code - any ideas? I can't add any code to head tag as the subscription level my friend Aug 12, 2024 · Hi there, I am seeking out some code for an image gallery section I have on my homepage. I'm currently using Image Blocks on my Home + Work pages but ideally I'd like to use a Grid Gallery Block with a hover overlay that displays title, description, and opacity. Mar 20, 2023 · Here in this blog we’ll be adding certain hover animation over our images. Is there any way to shrink the size of the vertical black border area around the text, to Apr 23, 2025 · To make text/overlay appears on hover Gallery Strips Image, you can follow these. Located on my homepage gallery (work), using a masonry grid - Just like https://www. Showing gallery titles as an overlay on hover in Squarespace can improve user experience, enhance the design of the website, and save space on the webpage. devonstank. The caption text links to another page on my site. layout-caption-over Jul 9, 2024 · @Exileking Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to display white text with a dark overlay on the hover state of images. Once done, click on the “ Save ” button to save your changes. Here is the current code. squ I’ll show you how to create a basic hover code that changes a button color on a hover, adds a filter to an image on a hover, and how to use item hierarchy to create a hover effect for list items. The sort of thing that happens here: https://techstacker. gallery-masonry-item { position: relative; } . Jun 18, 2015 · Basically, I'm using a Code Block with custom HTML5 for the structure and CSS (LESS) for the styling. I'd like to change the font sizes on the title and description that shows up on a hover on the captions. Nov 10, 2014 · Does anyone know some CSS Code to customize the current “Caption Overlay on Hover” option for images on the Pacific template? I’d like the caption overlays to appear over 100% of the image when I hover. Aug 26, 2021 · 13 hours ago, cl-lh-2021 said: Yes of course - all added onto Image 1. In this video, I show you how to style the image captions on hover for Inline Image Blocks in Squarespace 7. Jul 5, 2025 · In the classic editor, image blocks using the Inline layout can display captions below the image, as an overlay, or as a lightbox overlay. Sep 10, 2021 · Site URL: https://www. 0 plateform, I was using the image gallery block and I was able to add a text on hover. Copy & Paste this code snippet into the Header injection of the relevant page. Ideal for Squarespace users looking to add interactive elements to their design with simple CSS. Hover on top right of Gallery > Click Edit Section #3. 1 only. For aesthetic reasons, I don't want to replace my image portfolio pages w Jul 10, 2023 · Hi! Trying to use custom css to add a hover over effect on a masonary grid gallery. Anyone got any ideas on how to solve this? https://mouse-trout-epjy. 5s ease-in-out;} . This will work for Squarespace 7. com/display-text-on-hover-wit Dec 22, 2021 · Initial: Show image, Hide title only, Show Read More Under Image Hover: Show overlay + Title over image Thank you @tuanphan. The key to achieving this effect is using Squarespace’s Image Blocks feature, which allows for easy text overlay on images. annawasson. Adding captions to gallery images in Squarespace is a simple process that can be done in a few easy steps. This adds a subtle level of interaction and animation to your site and can be a great way to reveal titles and captions without obscuring an image or taking up extra space on a page. How do I get a banner with the caption to appear like I would with the native "caption overlay on hover?" 3. If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0. Feb 10, 2022 · Here's how I achieved what you are looking for: First, you will need to add image blocks to a page section and make them all "Poster" designs. Centered text should appear over the image. Feb 16, 2021 · There is a overlay when hover, how do you want it to be displayed? @media only screen and (max-width: 640px) { . Instead of a hover with caption, I would like the caption strip to appear as a constant below the lightbox image (no hover, no overlay over the image). Aug 7, 2020 · I am using the image block with a style to have the caption overlay, and the images are linked but then when you hover over the "overlay" portion it's no longer clickable. I would like to have the description of the image appear as a hover overlay when the cursor is put on it. Then drag them into rows like you have pictured. I want the images to have an opacity when you hover over them. gallery-caption. Aug 23, 2025 · To add Caption overlay to Gallery Image, you can do these. This step-by-step tutorial shows you how to enhance your hero images with customizable gradients that improve text readability and create stunning visual effects on your Squarespace website. Can someone help me get rid of it? Here's some of the code: /* caption from base to overlay in gallery - Desktop */ @media screen and (min-width:960px) { figure. I also tested using Masonry (See image #2), which is below the Simple Grid example. gallery-caption { position Aug 5, 2024 · Yes, you can add captions to a gallery in Squarespace. squarespace. On Members page, you can see I've added a grid of images with a working blue overlay on hover using the following code: . It seems that when I add an overlay it disables the clickthrough link on the image. It allows visitors to preview the title or description on an image before clicking on it. By using either the built-in tool or CSS code, you can easily add captions to photos in just a few minutes. erichmcvey. It links to a new page I've created just for this purpose - this will show the overlay disappearing. com/ Hi there, I'm trying to make the heading & caption aligned on the left of the image hover in this gallery. perhaps just tiny text over the bottom area of the image? Jan 10, 2023 · Hello everyone! I am attempting to create a zoom effect on an image when the cursor hovers over it. However, you could still make this happen on an Image Block with the caption set to overlay on hover and just use CSS to override the default styles. First, you need to enable Gallery Caption and add some caption text. Thanks in advance for the input. Jul 15, 2021 · Site URL: https://ferret-porpoise-kz74. 1 Fluid Engine Hi there, I am trying to add a white 50% opaque overlay to all images on the website I am editing. Does anyone know of a good CSS tutorial I could follow to ach May 24, 2023 · How can I edit my code so that in the attached screenshot: The colour overlay (on hover) covers the image perfectly The overlay text sits middle centre Many thanks Tara Mar 1, 2022 · Use this Squarespace CSS cheat sheet to quickly improve your site with a selection of free Squarespace CSS code snippets. im Nov 2, 2020 · 3. image-caption-wrapper . Currently the only option is to have the text live below the image. Here Jun 28, 2024 · Change color of hover overlay on image By 10014, June 28, 2024 in Customize with code Jun 18, 2020 · Hi guys, In 7. The effect works well. Aug 4, 2024 · Hello all, I am an artist working on my website (Squarespace 7. That should do it! /* Appear on Hover */ @media(min-width: 768px) { Sep 17, 2024 · Hi, I am trying to add some caption overlays to the images in a masonry gallery as currently displayed on my home page. And that’s it! Adding captions to photos is a great way to improve your Squarespace website or blog. This is the code I am trying to use (for one image block): #block-0 Want to give your Squarespace gallery captions a makeover? In this tutorial, I'm walking you through how to customize the font, size, spacing, background, and even line breaks using just a few May 24, 2022 · I used the following CSS code to display a second image on hover. However, each image also needs to link to a page. I've attached an image of the current alignment vs my goal of alignment. First, you need to open the Gallery Settings panel and select the image you want to add a caption to. Or send a forum message Buy me a coffee (thank you!) Oct 21, 2020 · Hi, Using version 7. Thanks! Website: https://saffron-butterfly-a26f. I assumed/hoped that I could solve this by adjust the font itself but that did now work. Jan 9, 2016 · I am using the Bedford template and I would like to change the "caption overlay on hover" feature so that the overlay covers the whole image, the whole image is clickable, and I can customize the colors of text and the overlay itself. Feb 28, 2025 · Description Initial: show image Hover: white overlay + black text #1. com I was wondering if there was a way to move the caption overlay on the home page images from the bottom to the top or middle of the image. gallery-caption { position: static; } /* title Jul 7, 2022 · I want them to display some (simple) title/caption text when the mouse hovers over them. If possible, when this is done, I would like t Feb 1, 2021 · Hi, I'm having an issue after adding a custom CSS to add a colour overlay and captions to the images in the masonry grid. I want to change the transition time so that the image caption fades in and out instead of appearing immediately. My goal: I'd like to see a caption when hovering over an image, and be able to click on the image to visit a full gallery. com/ Hello, I added some custom css to have an overlay appear upon hover of my image (attached screenshot). com Hi, I'm relatively new to Squarespace and even newer to the use of custom CSS but I really would like to know if I am able to add a hover design to the gallery on my main page and still have the links working. Easy to install, easy to edit, and comes with a lot of design flexibility so you can make it your own. list-item:hover i May 18, 2022 · Site URL: https://oboe-oriole-p6l3. The background has a fairly large amount of empty space around the text. To display, hide, and style gallery captions, switch the Captions toggle on or off in the section editor. I have attached a screenshot of wh Jul 16, 2023 · Hi all. 1. First, add Gallery (choose Image > Choose section with (i) icon) #2. Do I need to publish the site to see the actual hover effect or will it show in the editing menu? I would like to have Mar 10, 2022 · My client is unhappy with how large the "overlay on hover" is with her captions and would like to minimize the padding above and below the caption. Nov 25, 2024 · I have galleries on portfolio pages with captions changed to overlay text using the CSS below. Aug 14, 2020 · In the masonry gallery grid, I'm trying to add hover effects to my images- a color overlay and image caption on hover. Jul 9, 2021 · . May 12, 2021 · Site URL: https://burgundy-watermelon-ld9d. I talked to customer support, and they told me that 7. com Password: @Barleycorn5 Oct 18, 2023 · Works great! however, when this is applied, and i click an image, the caption of each shadowbox (for each shadow box I had to create an unlinked page and use a lightbox plugin to achieve the carousel lightbox) is now overlaid on the image. I've tried several tutorials on editing list or gallery item blocks, but nothing I do seems to have an effect on the carousel elements. com/squarespace-image-captions What is the code to the same hover action that happens on this page: https://www. layout-caption-overlay . 1? Aug 25, 2020 · Hi, I'm trying to alter Squarespace's default settings for a hover caption overlay using Custom CSS. Thanks! May 21, 2022 · hi, I'm trying to make an image darken when the mouse hovers over it, rather than lighten to the color of the background But it doesn't work successfully in Gallery and List of images my code is here: /* Hover Effects - list */ . Change this code . 1 website. Feb 18, 2022 · Hi, I've added a code found in this forum (I believe it's from @brandon), in my custom CSS in order to remove the captions in the gallery blocks and have them in the lightbox instead (very much like 7. Next, hover on top right of Gallery > Click Edit Gallery #5. 0 and I haven't found a Feb 3, 2021 · Site URL: https://www. com/ Hi all, I have a specific question about a hover over text on an images page template: How can I add a custom hover over text and style? Jan 2, 2022 · I found some code on here that I plugged into the CSS and tweaked with a little bit to get the caption overlay option, here is the following code: /*GALLERY OVERLAY*/ Jun 8, 2020 · Hi guys! I am using the BRINE template, and need some help with the tweaks on the Gallery Block slideshow. 1 I want the masonry grid gallery on my homepage to show text descriptions on rollover. It uses a grid: strips gallery on the homepage, however I can not get any CSS to complete the hover effect. I have three interrelated questions: 1. image-block-v2). The description is below the image: What I am trying to achieve: Feb 14, 2021 · You can add awesome Squarespace image and text animations and, image hover effects on your website both with built in features and using some simple CSS and html code. Image is not clickable when hovering over white overlay. Oct 19, 2020 · I've managed to change the text and colour of the overlay but I would like to change the image overlay on hover to cover the whole image and also for the transition to fade in. What I want is to have a gal Nov 14, 2024 · I am looking for a way (it's gotta be custom code I guess) to have overlay text captions appearing on hover over already clickable lightbox images, while having these images still being clickable to see it in "full screen". Nov 6, 2024 · As version 7. How do I get the transition to be less abrupt? More of a fade in and out? 2. oliviabossert. Gray Scale Animation In the below code snippet we’re adding an effect that turns image into gray scale on mouse over. Adding Pricing Tables to your existing Squarespace site is a great way to show details about your product or services. Below is a step-by-step guide to adding captions to a gallery in Squarespace, along with some considerations and limitation Apr 7, 2023 · Learn how to change images on hover in Squarespace Fluid Engine. (Due to issue #1, parts where the exposed image is not covered by white overlay is actually clickable). I would like to overlay my description on the image but can't seem to find the code. Oct 24, 2019 · Captions for gallery section images in 7. On page sections using the classic editor, you can select formatting for the caption text in the text toolbar. In this video I show you how to have your captions display overtop the image on hover for Grid Gallery Sections in Squarespace. Jul 11, 2021 · I would like to add captions to my images that only appear when you hover. Caption Overlay on Hover - Caption displays over the image in a dark gray bar when the cursor hovers over the image. gallery-caption-grid-masonry:before { background-color: rgba (0 Jun 16, 2022 · Hello, I am looking to tinker with and edit the "Caption Overlay on Hover" code on a images in a website not currently published (https://hen-shallot-83dt. We can apply these effects to image blocks or In order to target a specific image, we can use image block Id. Tip: Go to our CSS Images Tutorial to learn more about how to style images. How d May 18, 2023 · This will bring up the Custom CSS panel where you can add the code to format your image captions in Squarespace. Sounds good? Then let’s jump right into it! Jun 16, 2024 · How do you add hover effects and color overlays to your images in Squarespace? If you aren't finding options to customize images in Squarespace the way you w Mar 16, 2023 · Hi all, wondering how I can change the background color/transparency of my caption overlay on hover, with custom css code. May 20, 2014 · Hi! I'm trying to add a color overlay and text overlay on hover/rollover of the gallery grid image links on the homepage of my Bedford template portfolio site. com/members Hello, I am trying to add a blue overlay on hover to the images in a portfolio grid. sqs-block-image . 51eggs. I'm still in version 7. 1) and am trying to make css adjustments to a gallery block lightbox. has-clickthrough) . Add caption text to Gallery Description It will appear under Image #6. Nov 4, 2020 · In this video, I show you how to style the image captions on hover for Inline Image Blocks in Squarespace 7. com/ As you can see on my site, when you hover over each portfolio image on the portfolio grid, there is a transparent black overlay with the caption. image-caption-wrapper { Mar 23, 2025 · Description Initial: show Gallery Masonry Image Hover: Show image, overlay, text in bottom left corner #1. Same issues as above Issue #2 except the white overlay and caption are correctly aligned. com Jul 13, 2021 · Site URL: https://saffron-butterfly-a26f. Dec 20, 2024 · Hover effects display information or create movement when you move your cursor over an image. ga Aug 18, 2020 · Hello all, I'm trying to add an image hover effect on my 7. dk/forside-ny Hi all, Trying to make a hover function on our employee gallery, showing their contact info (caption) when hovering the mouse over image. 0, I don't know why they wouldn't keep that but eh). So it works great, but I wonder if there's Dec 4, 2020 · Site URL: https://www. I've managed it before on a simple grid but for some reason it's not working for Masonry. : /* gallery Hover effect */ figure. I haven't found in the forum if anyone has figured out a solution using custom code? I am attaching a place on the homepage where I would like May 27, 2020 · figcaption. This was all done using simple CSS. hayljcf zzczx vhqqwb zeax jqppfh pdxgkt iuda ogb yfcehm cgjx rbfqdn aevx klvji qbfds mhdcg