How to Generate Custom CSS for Squarespace using ChatGPT

I received a question from one of our customers today about how to make image caption titles appear on hover. I thought this would be a good case study for using ChatGPT to generate CSS on a Squarespace site. Let's dig in.

First, we need to inspect the element. I will isolate the image, and it seems that each of these divs applies to a different image. I will click "Edit as HTML," copy the entire HTML, and paste it here. Now, in my prompt, I will ask ChatGPT to write CSS to make the caption title appear on hover.

To make the caption title appear on hover, we can use CSS. Here's an example of how to achieve this. Let's test it and see if it works. It seems that the image slide title is currently below the image. How can we make it overlay the image? This code might help us achieve that. Let's copy the code and give it a try.

I will paste this in my custom CSS. As you can see, the image title now appears on hover. Let's save that. We might want to change the color of the text and adjust the spacing. To change the font color and size, we can use the following customizations. I will copy that piece and paste it within what we already have here, then hit save.

Now the color is white, and the font size is 20. If we want to make it 30, we can adjust the code accordingly. However, let's bring it back to 20, as that seems good enough.

So, there you have it. This is how you can generate custom CSS for your Squarespace site using ChatGPT. It's quite simple. First, copy your HTML and give a specific command. If the initial command isn't specific enough, go back and provide more clarity. If you have any questions about this process, feel free to leave them in the comments, and I'll be happy to answer them. Peace.

Here’s another example…

You can find the code here.