Hover behaviour on rollovers

Support
#1

Hi guys
I have 2 rows with similar hover behaviours. I duped them for consistency. But I now find one row is not performing as the other can you have a look at this for me?
URL: https://johnbarilaro.com.au

#2

Hi @philysgdy,

Thanks for reaching out!

The reason why the hover behavior is not behaving correctly because you didn’t hide the Quick links 1 < 767 section correctly and they are overlapping with the Quick links 1 >767 section. Please double-check the hide during breakpoints on that sections.

Hope that helps.

Thank you.

#3

Thanks Marc
I double checked they were the same but I will repeat the process see what happens. Yes, I see changing the section and row margins have fixed the problem. Is it better to hide both >767 sections and use one section for <767 media?

#4

Hi @philysgdy,

Glad that we are able to help you. In this context, it will be better if you hide both the section.

Thanks

#5

Hi tristup
Thanks for the advice. I will move forward with that and let u know how it works

#6

Hi Phil,

Great! Looking forward to hearing from you. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

#7

Yes I did that and it cleaned up the approach, thanks guys you are stars :smiling_face_with_three_hearts:

#8

You are most welcome.

#9

Hello,
I am looking to do something similar as @philysgdy did on his site, where you mouse over an image and bring up text like that. What control(s) are you using?

I have tried image, card, grid, column, and button, but haven’t come up with something that works for what I am trying to do.

Here is my scenario:
I have an image with a text overlay. When I mouse the image, the transition needs to slide in. I need the original text to disappear, a transparent overlay the image and new text to appear.

Can anyone point me in the right direction?

Thank you

#10

Hey there
thought I would give you a heads up on my approach, I used an asset from the design cloud if you think a bit outside the square about your UX and it reads like you are, it works a treat
cheers

#11

Hey Jeff,

You can check out this video demonstration instead:

The resulting template of the video can be found in the Design Cloud:

Best Regards.

#12

Thank you @philysgdy and @marc_a for the links. This was 100% what I needed to see. I got it working ~99%. The only issue I have is that after my transition for one of my elements is complete, it goes to 50% opacity.

I have tried different methods to get this to work and I am coming up with nothing. Here is my css:

.interactive-column .revealed-text {
opacity: 0;
}

.interactive-column:hover .revealed-text {
opacity: 1;
transition: opacity 3s;
}

.interactive-column:hover .image-overlay {
opacity: .5;
}

.interactive-column:hover .title-text {
transform: translateY(-250px);
transition: 0.5s;
}

Before hover:
image

After hover:
image

After transition timer ends:
image

Do you know why it goes to ~50% opacity after the time elapses?

Thank you

#13

Hello Jeff,

Glad to know that things are well for you. Thanks for sharing the information. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.