Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

Currently working on a one-page landing page using Squarespace and running into some issues with creating a slideshow. You can check out my website here (the slideshow is located at the bottom of the page):

Squarespace provides default options for text positioning, but only as overlays on images. I'm looking to have the description text for each image displayed at the top like a title.

I came across a similar question online, but the suggested CSS code isn't working for me (I'm just starting to learn CSS...)

Thank you in advance for any assistance you can provide!

Answer №1

The functionality to display image descriptions as overlays is already included in Squarespace by default, unless I have misunderstood your query. To activate this feature, simply check the box in the Gallery Block settings and ensure that your images are accompanied by descriptions. For more information, you can visit the following link:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The image in the footer seems to have a mind of its own, refusing to stay put and instead choosing to wander

Is it possible to add a small icon at the bottom of the footer that scrolls up or down as I scroll, instead of remaining fixed? I'm unsure if the issue lies in setting the image as sticky on scroll or if it's a CSS error. I attempted to set the ...

The equation of jquery plus ie7 results in an undefined value

I am experiencing a strange issue in IE7 with a jQuery script. This problem seems to only occur in IE7. In summary, when I check the console window, it shows that jQuery is not defined - even though I have loaded jQuery (version 1.7.1) from my disk and can ...

Do I really need to use backbone.js in my project?

Lately, I've become intrigued by backbone.js while working on a webapp. Now as I embark on a new project, I'm contemplating delving deeper into the world of backbone.js. Currently, I'm in the midst of a 3-part screencast tutorial on creating ...

CSS alone has the power to make multiple elements react to a hover action on a div

Is there a way to dynamically change the size of multiple div elements on hover? In this example, we can see how one div element's size changes when hovering over another div element: https://jsfiddle.net/9510a6kj/ .left, .right{ float:left; ...

Loading dynamic CSS on WordPress frontend only

I am facing an issue with the dynamic css file in my WordPress theme that is loaded using Ajax. The problem is that it also loads this dynamic css file for the backend. Can someone help me modify my code so that it only loads the dynamic css file for the f ...

How can the HTML source code be printed without showing it in a window or tab?

Here's the scenario: I'm making an ajax post request to a controller action, which returns complete html source code. I want to print this html source as if it were being displayed in a browser without opening a new tab or window. Is there a way ...

JavaScript powered simple window

I am currently working on a basic modal that will open and display content. Unfortunately, I cannot add images to help illustrate the design, so I'll do my best to describe it in detail. The modal is linked to an image slider where the heading change ...

Creating a button within a card: tips and tricks

As I work on designing web sites, I often face challenges. One of my go-to tools is bootstrap, especially when creating card elements. Here is the code I typically use for creating cards: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c ...

Issues with JQuery draggable event not functioning properly on Internet Explorer 9

Every browser handles the following code without any issue, except for Internet Explorer 9; $(".dragbox").draggable({ handle: ".header", grid: [1, 1], containment: 'parent', reflow: true, stop: functio ...

Error: jQuery Datatables Library encounters an issue with undefined variable "oColumn"

I'm encountering an issue with implementing the jQuery Datatables library on my Joomla website's table. The script partially styles the table, but then stops (changing header and text colors, but missing datatables controls). http://datatables.ne ...

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

"Hover over the image to see it enlarge and reveal text displayed on top using CSS3

I have been working on creating a responsive image page for my website. I've managed to make the images responsive and centered, no matter the size of the browser window. However, I encountered an issue where when I hover over an image, it enlarges a ...

Is it possible to conceal the controls on the slick carousel?

Is there a way to prevent slick from automatically adding next and previous buttons? I've tried using CSS to hide them but it doesn't seem to work. <button type="button" data-role="none" class="slick-prev" aria-label="previous" style="displ ...

What are the steps to creating a custom CSS rule?

While it may seem unconventional, I can't help but wonder if it's possible to create a custom CSS rule using jQuery. Imagine being able to specify something like this in a CSS stylesheet: div { color: white; background: red; /*declaring m ...

Utilizing CSS attr() for setting the width dimension

I'm having some trouble setting the width of an element using attr() in CSS. Chrome keeps giving me an "invalid property value" error and I can't figure out what's causing it. What I'm attempting to do is use the attribute "prog" as th ...

Masonry List with Next.js Image Fill

I am encountering an issue where the normal HTML img tag works perfectly fine inside my Masonry List. However, when I use the Next.js Image Component with a layout of fill, it fails to render anything. Custom Styles: const ImageList = styled('ul&apos ...

Photo Label fails to adjust size correctly when loading two sources (png and webp)

Currently, I have been working on a website that showcases a 3D book: The challenge I am facing is to ensure support for both png and webp images across all browsers. Initially, when I load just one image, everything works perfectly: .book-container { ...

Having trouble with Angular UI Select functionality?

I have integrated the angular ui select library from https://github.com/angular-ui/ui-select into my project. Instead of using the traditional select element, I am now utilizing the ui-select directive. This is a snippet of my code: <select class=" ...

Deselect a checkbox that is already selected and choose the current option in the multiselect dropdown

I've created a code that allows for single select in a multiselect dropdown, disabling other options once one is chosen. However, I don't want to disable the checkboxes and would like to uncheck the selected option if a new one is chosen, all whi ...

An issue has been identified with the functionality of an Ajax request within a partial view that is loaded through another Ajax request specifically in

Here is the current scenario within my ASP.NET MVC application: The parent page consists of 3 tabs, and the following javascript code has been implemented to handle the click events for each tab: Each function triggers a controller action (specified in t ...