How to Change Full-Screen Image on Hover

Community resources Webflow Tips
1

Hey guys,

I’m trying to resolve hover state with full screen image on regular text x3.

Here is the best example:

Challenge is, how would you resolve it trough webflow?

2

Ready?

  1. Make body height:100%;
  2. Add section “home” height:100%; position:relative;
  3. Add div “photo container 1” position:absolute; width:100%;
    height:100%; background-image:your image 1 (set to poster and
    center); display:none;
  4. Add 2 more div for the two other images, same exact properties.
  5. Pour scotch, add a very little amount of chilled water.
  6. Add a container “title container” position:relative; top:50%; and go
    to effects and add a vertical displacement of -50% (this centers the
    container vertically)
  7. In the container add a text “big text” display:box; color:white;
    size:the good size; font:the good font + add transition:all in
    effects + add :hover state red
  8. Copy and paste the text twice, edit the phrases, and adjust the line
    height of the “big text” element to match your reference
  9. Select the first “big text” element, add a new interaction “display
    background 1”, add a onHover trigger. Set it to OnHover affect a
    different element, type “photo container 1” then add a step, click
    on display:block; with 300ms ease. Then set the onHoverOut to
    display:none; the same way.
  10. Add a new interaction for the two other “big text” elements, each
    targeting their designated background element.
  11. Test.
  12. Drink scotch.

After that you can make it better than your reference.

  1. To the display:none; property of the background divs, add opacity:0.
  2. Then add opacity:100%; to the display:block; in your interactions
    (and opacity:0; to the display:none; of your HoverOut step too of
    course) and you’ll get a nice fading effect.

You can got neater…

  1. By adding overflow:hidden; to the parent section, and an interaction
    to the divs containing the background images (the same interaction
    to the three of them).
  2. Then set the interaction to onLoad, add a step and make the image
    zoom by 1.1 on 15000ms, ease-in-out, then add another step to unzoom
    to original 1.0 within 15000ms too.

Your bg will be in very subtle motion, could be rad.

3 Likes
3

Aaaaaaand we have a winner!! @vincent show off advance skills and speed!

Thank you! I made it with a few bugs on second photo container. But that is because of me, maybe because of 5th step :smiley: I will make it more neater and everything will be just fine.

1 Like
4

Awesome, I’m trying to get this effect going too.
@vincent I tried to follow your steps, but got lost on two steps since I’m still a webflow newbie. Instead of the background displaying only when I hover over the text, it just displays whenever I hover over the page in general. Can you clarify these two things?

For display none, do you mean the main Display Setting in the Positions area? Or the one in the Image & Gradient panel next to your uploaded image?

I was able to get the transitions to work on hover, but the hover trigger area seems to be the whole page, versus just over the text. My guess is I messed up somewhere between these two steps. Where’s the display:box setting for the text?

Please and thank you :smiley:

5

http://vincent.polenordstudio.fr/snap/4pr66.jpg

For the rest, can you give me your public link please?

1 Like
6

@vincent After repeating all of your steps again with the new display setting, it worked! I probably messed up the first time, haha. Thank you for providing the answers :smiley:

2 Likes
7

You DON’T have to drink scotch at each attempt, only when it works, and it’s not mandatory. Felt I had to disclose this :slight_smile:

2 Likes
8

@vincent Any idea on how to do this for a 50/50 split layout using flex box? I’ve played around with nesting divs, adding image blocks, etc. but with no luck.

https://preview.webflow.com/preview/move-west?preview=7683d5cbee900f7fad753471c902c134