Streaming live at 10am (PST)

[Russian] Hover interactions

Hey guys :slightly_smiling:

The hover interactionvideo tutorial isn`t working so I might need some help…

I`m trying to create a hover interaction that I want to apply to three photographs (all same size) that stretch across the full width of the page. See image:

What I would like to do is to hover over each of these images and for two interactions to happen. 1) The photo has a colour overlay or gradient and 2) A logo fades in in the center.

Any tutorials on this please?

Thanks in advance!

Heres my link: https://preview.webflow.com/preview/vrxstudiostest?preview=d6b7c05caf2767179319e234344171fa

Just add a Div on top and text inside the Div, make the animations of the top Div disappear fully when not hovered, and when hovered have it appear 100%. Since the text is inside the Div it should effect the text as well.

Also set the Div to like background black 50%, play with the CSS…

Hope this helps, sorry I dont have time to go into detail right now, maybe later though I can recreate it for you, Hope you understand…:grinning:

1 Like

Cheers @VLADinSACRAMENTO I will try this out now!

If you could recreate this for me when you can I would really appreciate it! @VLADinSACRAMENTO :relaxed:

Really busy with my clients this week but will try to recreate it for you by today. :wink::grinning:

1 Like

Hello :slight_smile:

If anyone could assist me on a few things I would be very grateful! So far I have managed to complete the task (yay!) although there are some elements that aren’t working correctly. I can’t change the images on the second and third div. (I could change the images when I used actual images, but not when I use div blocks) The logo on the first div doesn’t disappear but the second last two logo’s do. Also, when I click out of the toggle view the images stretch and change size…? I have used a link block, a div block and an image. Is this the right way to complete this task? I need each of the images to be a link.

Any tips or suggestions?

Here is the link to the mock-up I have created… it is on the very last page called “Testing”

https://preview.webflow.com/preview/vrxstudiostest?preview=d6b7c05caf2767179319e234344171fa

I sent you a PM of a tutorial on how to do this, please do check it out. :grinning:

1 Like

Good morning! I will take a look at it now :slight_smile: Thank you so much!

No problem… Did the video [tutorial] help? :blush:

Did the tutorial help?

1 Like

Good morning @VLADinSACRAMENTO I haven’t had a chance to edit my artwork but I watched your video and it seems to make perfect sense! Thank you so much for taking the time to help me :slight_smile: I will get back to you early next week once I am working on our site again. Much appreciated.

1 Like

Okay, that’s great news! :wink::grinning::blush:

Владимир Витальевич, помогите, пожалуйста, если не сложно! Вы, случайно, не знаете, как сделать такую же анимацию Hover trigger interaction, как в этом видео? https://help.webflow.com/lesson/what-is-the-webflow-cms

Т.е так, чтобы при наведении на фотографию (в превью поста блога), она уменьшалась именно внутри блока ( т.е. покрывала его и при наведении, и при убирании наведения).

Благодарю!

@smirnovagenia Это видео я сделал для @irishdesigner : http://quick.as/qWxPh9jp3 :wink: Помогло? :blush:

@smirnovagenia Видимо я не тот видео прислал . :anguished: Простите.

Привет, @smirnovagenia.

К сожалению, @VladimirVitaliyevich прислал не то видео (там другой эффект).

Сделать такой эффект как Вам нужно, можно 2мя способами:

  1. использовать картинки в качестве background-image и потом на “hover state” увеличить их размер
  2. использовать картинки как отдельный элемент image, тогда у них должна быть position: absolute, а у блока, в котором картинка сидит - position: relative и overflow:hidden

Надеюсь так понятно. Если будут ещё вопросы -обращайтесь.

Cheers,
Anna

1 Like

Анна, спасибо за ответ! Все получилось сделать по второму варианту, но почему-то фото стали подвисать - наверное у меня они очень тяжелые.

А, сделав первый вариант (background-image и потом на “hover state”), не удалось сделать плавную трансформацию. Картинки уменьшаются и увеличиваются резко при наведении, без slowmotion, если можно так сказать. Может быть с этим можно что-то сделать?

Спасибо!

Да, конечно можно. Эта опция регулируется здесь

Потом там же выберите длительность перехода

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