Hero Images, show only when hover

Hello guys,
working on my little project, and trying to achieve to hero images show only when hover on particular part in the hero section. Named Block A-C. How do I please achieve that all images will be hidden when page loads, instead of showing all at once first. Then when you go all through the hover trigger parts, it works how it should.
Thank you for your replies.


Here is my public share link: Webflow - Revyko

Hi @kittlerjakub,

I see the images in A, B, C. What do you plan to hover over? Or do you just want the images to show ‘On Load’ - in order A, B, C?

Hello @garymichael1313 , what I need when load page, there will be for example one default image showed up, but the rest will be invisible and it will appear only when mouse hover on particular section, as it work now. So now the behavior is working well, but the “on load” state shouldnt be that all images are visible.

Hey @kittlerjakub

Okay, it’s a little hard to understand. So on load, images A, B, C should be invisible? Then what do you want to happen?

Do you have a mockup or artboard?

Hey @garymichael1313 , no I don’t, but you got it right. I need all images to be invisible on load. Appearing only when hover on particular part.

@kittlerjakub,

Ok gotcha. Then a user will mouse over a section, then the image will fade in. What would they mouse over if the space is blank?

If they mouse over the empty space outside the hover sections, the image will fade out. Just notice, this is not final state, I want to have the the text with hover parts in that current empty space :slight_smile: Currenty I am just testing the possibilities.

Okay set it up and republish. I just looked at the site and when I hover nothing happens. Do 1 and let me see. So it’ll be a title, let’s say on the left side under the logo. Kind of off to the side?

If you had a mockup or sketch I could visualize. I use Affinity Designer or Framer beforehand. It’s the best way to start. A sketch on paper, then mock in graphics app, then align framework in Weblflow, then build the animation. It’s pretty much a 4 step process all the time. It’s really hard to start in Webflow.

I’d recommend drawing this on paper first. You can always take picture with your phone and send yourself an email with it. Open email on computer, then load upload here.

Otherwise, if you do one; then I can go in an do an example for the others on video.

There is no need, the hovering is working perfectly fine, I just needed to find out how to do to make all the images invisible on load the page.

Okay did you republish? I look at it for ya.

Sorry, was off for a few days. Its published since the beginning. But I noticed that you have to go to edit and preview mode with and “eye” icon in the top left. Then the hovering is working.

1 Like

Ok no problem, take care
:slight_smile:

So, did you check the hover parts? :slight_smile:

So which page again? I was on the home page looking at… I see two photos. The other nav menus don’t click. Again, it’s hard to understand what you’re trying to accomplish. I see the same thing, I used the same read only link from the first post.

Can you click on the “eye” twice to get it working, please? And then try to mouse hover.
image

I see now. But there’s nothing that indicates what to do. I’m not sure of the goal. It’s hard to know what it’s trying to accomplish.