Streaming live at 10am (PST)

[Russian] Hover interactions


#1

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


#2

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:


#3

Cheers @VLADinSACRAMENTO I will try this out now!


#4

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


#5

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


#6

Hello :slightly_smiling:

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


#7

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


#8

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


#9

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


#10

Did the tutorial help?


#11

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 :slightly_smiling: I will get back to you early next week once I am working on our site again. Much appreciated.


#12

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


#13

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

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

Благодарю!


#14

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


#15

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


#16

Привет, @smirnovagenia.

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

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

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

Cheers,
Anna


#17

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

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

Спасибо!


#18

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

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


#19

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