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.
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…
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”
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 I will get back to you early next week once I am working on our site again. Much appreciated.
Т.е так, чтобы при наведении на фотографию (в превью поста блога), она уменьшалась именно внутри блока ( т.е. покрывала его и при наведении, и при убирании наведения).
К сожалению, @VladimirVitaliyevich прислал не то видео (там другой эффект).
Сделать такой эффект как Вам нужно, можно 2мя способами:
использовать картинки в качестве background-image и потом на “hover state” увеличить их размер
использовать картинки как отдельный элемент image, тогда у них должна быть position: absolute, а у блока, в котором картинка сидит - position: relative и overflow:hidden
Надеюсь так понятно. Если будут ещё вопросы -обращайтесь.
Анна, спасибо за ответ! Все получилось сделать по второму варианту, но почему-то фото стали подвисать - наверное у меня они очень тяжелые.
А, сделав первый вариант (background-image и потом на “hover state”), не удалось сделать плавную трансформацию. Картинки уменьшаются и увеличиваются резко при наведении, без slowmotion, если можно так сказать. Может быть с этим можно что-то сделать?