MarianaGR

thank you Joseph! it worked!

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

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

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!

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 😕

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!

On 9/23/2022 at 9:09 AM, tuanphan said:

Hi. Make frame only or make frame + make image clickable?

Hi!

Make everything clickable (or whatever is easier, image, or button that will be like a frame around everything, like in the image attached.) thanks!

Hi!

Make everything clickable (or whatever is easier, image, or button that will be like a frame around everything, like in the image attached.)

exactly!

the button would be like the frame around everything else, so wherever you click it's part of the button

(edge of the button can be visible or transparent, doesn't matter)

it worked! thank you Tuanphan!!

2 hours ago, tuanphan said:

Can you share link to page where you have problem? We can check easier

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

this is the link and see attached a screenshot of the specific section

Hi bangank36!

thank you for your reply.

Since the only way to link the images to specific pages (each image corresponds to a different project), is by adding the button; I was wondering if there is a way to customize the button, in order to make it look like a frame around the image (see screenshot).

The title and subtitle would be inside the button as well. Title on top of the image and subtitle below.

thanks again for the help!

yes! i changed the arrow's background colour to match the general background colour. but when passing over the images after clicking the arrow, you can see there is a background, and it's not transparent

hi!

sorry I meant the other section that is before that one.

that is my old gallery, organized in a blank page, and not in a carousel like the one on top.

hope this makes sense!

I was asking about the carousel one.

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

Hello!

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

I would like to add some custom CSS to my slideshow gallery section (the WORK section).

Since the only way to link the images to specific pages (each image corresponds to a different project), is by adding a button; I was wondering if there is a way to customize the button, in order to make it look like a frame around the image (see screenshot).

The title and subtitle would be inside the button as well.

thanks for the help!

hey Tuanphan! could you help me with that code? I have tried it in my website but it doesn't work 

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

thanks!

M

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

hello!

I need help with the following topic:

At the moment I am displaying the projects in my website in a blank page section, however I would like to have them on a carousel to avoid the scrolling.

my question is, is it easier to use some CSS coding the turn the gallery into a carousel, or is it better to custom the slideshow gallery section (so the title is on top of the image, linking images to specific pages, transparent button etc etc).

There are some elements from the carousel original template that I dislike, such as the limitations when it comes to design; so I wonder if there is a way to turn the blank page into a carousel to keep my design layout.

thanks for the help!

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

hello!

I was hoping someone could help me change the position of the titles in the WORK gallery slideshow (see screenshot).

At the moment both the title and subtitle are under the image, but I would like the title to be place above. The subtitle can stay in its current position.

my website is:

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

thank you!

Hi! thank you for your answer, but that is the link I was previously using and it still doesn't work 😕

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

Hello!

I am trying to add a link to a specific section of a page but I get this message every time:

We couldn't find the page you were looking for. etc.

So, at the bottom of this page https://www.azulstudio.co.uk/jewellery there is a button, and I would like it to be linked to the WORK section of the homepage.

anyone can help with this?

thanks!

also, is there a way for the hover effect to work on mobiles? thank you again!

amazing! it's working now,

thank you for solving this.

last question, do I have to copy and modify the code for each one of the images on the block? or is there a quicker way to do it?

thanks again tuanphan!

Hi again!

I just realized that the image link does not longer work when the hover effect is applied.

Is there a way to solve that?

thank you!

M

Hi Tuanphan!

IT WORKED!!

I just changed a few things regarding the colour and fonts but it's perfect!

Could you show me how to apply it to the other images as well?

THANK YOU AGAIN!!!!

M

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

Hello!

my site URL is https://www.azulstudio.co.uk

I am trying to add the colour + text overlay effect when hovering over the images on the "work" section.

For example, when hovering over the first picture on the right of "WORK" I would like it to be covered with a solid color rgb (100,39,39) and a title to appear (in this case "Decorex 2021).

I have tried several tutorials but none of them are working, as I feel that I am not targeting the specific image correctly.

Any help is very much appreciated!

thank you!

Mariana