reel gallery title position

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!

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!

 

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

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

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 😕

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!

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.

Regarding the title that should be on top:

.user-items-list-carousel {
  .list-item-content,
  .list-item-content__text-wrapper {
     display: contents;
  }
  h2 {
    order: -1;
    padding-bottom: 10px;
  }
}

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

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

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

The background: transparent should be with important

background: transparent!important

The title above the image solution is in this comment: 

https://forum.squarespace.com/topic/226915-reel-gallery-title-position/?do=findComment&comment=576008

thank you Joseph! it worked!