Jump to content

reel gallery title position

Recommended Posts

Site URL: https://www.azulstudio.co.uk/

Site URL: https://www.azulstudio.co.uk/

Hello!

my website is https://www.azulstudio.co.uk/

I need help with my slideshow gallery section (the WORK section) so the button becomes a sort of frame around the project image (see screenshot).

Also, I would like the title to be placed on top of the image, and the description below (while remaining inside the frame).

This way it will feel like you are clicking on the image but instead you are clicking on the button.

 

If this is not possible, could the image have a link to its specific project (page)?

thanks for the help!

 

image.png.db9ff097ceecd6bdbf5647a61a152ece.png

Link to comment
9 minutes ago, MarianaGR said:

Site URL: https://www.azulstudio.co.uk/

Site URL: https://www.azulstudio.co.uk/

Hello!

my website is https://www.azulstudio.co.uk/

I need help with my slideshow gallery section (the WORK section) so the button becomes a sort of frame around the project image (see screenshot).

Also, I would like the title to be placed on top of the image, and the description below (while remaining inside the frame).

This way it will feel like you are clicking on the image but instead you are clicking on the button.

 

If this is not possible, could the image have a link to its specific project (page)?

thanks for the help!

 

image.png.db9ff097ceecd6bdbf5647a61a152ece.png

Do you mean that you can click on the all item (the box around image, title, description) to access the link?

Currently, we can only click on the image

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
.user-items-list-carousel {
  .list-item-content__button {
      background: transparent;
      position: absolute;
      text-indent: -99999px;
      left:0;
      right; 0;
      top: 0;
      bottom: 0;
	  padding: 15px;
	  margin: 0 auto;
      width:50%;
  }
}

This CSS code would be for the button to surround the whole content.

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
23 minutes ago, bangank36 said:

Do you mean that you can click on the all item (the box around image, title, description) to access the link?

Currently, we can only click on the image

Hi Bagank36!

thank you for your answer.

I would just like either the button or the image to be clickable so I can add a link to the specific project (page), whatever is easier 🙂

The idea of the button acting as a frame came because I was told that the image could not be clickable 😕

Link to comment
21 minutes ago, joseph81 said:
.user-items-list-carousel {
  li {
  	position: absolute;
  }
  .list-item-content__button {
      background: transparent;
      position: absolute;
      text-indent: -99999px;
      left:0;
      right; 0;
      top: 0;
      bottom: 0;
  }
}

This CSS code would be for the button to surround the whole content.

Hi Joseph81!

thank you for your help!

Is it possible that there is a syntax error?

thanks again!

 

 

Link to comment

If you put this code into the Custom CSS section which is using the LESS preprocessor, then there is no syntax error. Please use the updated CSS code by the way, because I took out the position absolute from the li tags.

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
8 minutes ago, joseph81 said:

If you put this code into the Custom CSS section which is using the LESS preprocessor, then there is no syntax error. Please use the updated CSS code by the way, because I took out the position absolute from the li tags.

Hi Joseph, 

there was a small syntax error "right ; 0;" but I changed it 🙂

However, it still doesn't work. Am I doing something wrong?

Please see screenshot of code applied but no changes on the button.

thanks

Mariana

 

Screenshot 2022-09-29 at 16.29.17.png

Link to comment

Oh sorry, I don't see that well without my glasses. Let me check There might be different classes after you save that code and look at your site(not on editor mode). So please take a look on your site on non-editor  mode after you saved that css.

Do you have 2 underscores before the button text? 

.list-item-content__button
Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
On 9/29/2022 at 4:37 PM, joseph81 said:

Oh sorry, I don't see that well without my glasses. Let me check There might be different classes after you save that code and look at your site(not on editor mode). So please take a look on your site on non-editor  mode after you saved that css.

Do you have 2 underscores before the button text? 

.list-item-content__button

Hi Joseph, thanks for your reply.

I added the second underscore but unfortunately that makes the image non visible. You can kind of see it when hovering with the mouse (see screenshot).

Is there a way to solve this? (maybe making the button transparent?)

Also, is there a way to place the title above the image?

 

thanks again!

M

Screenshot 2022-09-30 at 23.03.45.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.