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: https://preview.webflow.com/preview/revyko-v2?utm_medium=preview_link&utm_source=designer&utm_content=revyko-v2&preview=bb3a023f711ea6ab3f0b0142ed3ac3a4&workflow=preview
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 
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
So, did you check the hover parts?
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.
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.