Image button display more info

Design help Animations & Interactions
1

Hello Guys!

I need some help in this… I want to display more info when people click on the image. So i tried to use “tabs”, but they dont collapse again when i click in another stuff. I hear about an animation, but i don figure out how to do it.

Someone has a better option to do it?

Thanks in advance!
The only place that work (where i tested) is: produtos/acessórios.
https://webflow.com/design/equiposhop?preview=6ea9e3907e3113139487f1684bc2d125

2

Haha yes it seems you’re going nowhere with your tabs acting like giant tooltips (:

The principle you’re looking for: One click, or hover, on your element make another element, containing your infos, appear.

You could make the info appear when hovering the initial element, and make it disappear when you stop hovering. The info can be aside of your initial element, or even on top. You have some design decisions to take here, and you have several options to put it together.

Example 3 from this page https://webflow.com/design/interactions?preview=8566312743353562051c799dc925c01e is a possibility (an an elegant one, as the space taken by the tooltip shrinks when it disappears).

Example 5 from the same page show you how to put element on top of another and display it on hover.

Look on one of my project, I made one element displaying the details on hover. The one on the right remains static. Click on the image if it doesn’t animate.

477×636 758 KB

Hope this helps!

2 Likes
3

Hey!!!

This was REALLY HELPFUL!!!

I was wondering if i use slider to do it, but the option you show rocks!!!

Thanks a lot man, i will do it and show here after!!!

Thanks thanks thanks!!!

1 Like
4

That’s very nice of you thank you (:

Hope you’ll get how many things you can achieve with interactions, in the process.

PS: I love your avatar pic :smiley:

1 Like
5

More one question. I have to do a different interaction for each image that i have, right? Duplicate the interaction and the class? I have several images to do it.

Thanks again! I forgot this tutorial! rs

The slider can work too you think? (i put in the site already for test)

's

PS: it was a sunny day with a gopro! ;]

6

I don’t think so. You’ll see two extremely handy options just below the class target field called “limit to nested elements” and “limit to sibling elements”.

So, nested elements are actually child elements, and sibling are siblings. Example.

<div class="container">
   <div class="product photo">...</div>
   <div class="product description">...</div>
</div>

In the example above, the “container” is the parent, and .product photo and .product description are its childs. .product photo and .product description are siblings (brothers).

<div class="container">
   <div class="product photo">...
       <div class="product description">...</div>
   </div>
</div>

In the example above, .product description is a child of .product photo. It’s nested in it.

So you can use either structures. Let’s say you use the first one. Then check the “limit to siblings” checkbox in your interaction. That way, it will always target the .product description sibling element. So you’ll have one interaction for all your images/products and it will only affect siblings elements, not siblings of others elements on the page.

1 Like
7

NO to the slider. Don’t hack it.

Also put your ‘image button’ into a LINK BLOCK so you get a nice hand cursor on Hover.

1 Like
8

WOOOOOWWWW
Works just as you said! And its easier to customize and design.

Thanks again! thanks a lot man!

9

Hey @vincent!
This is my last question, i promisse!!!

I do what you show me (not with the final layout) but its seens to be a bug or something that i did wrong. The text appears and after have the animation of the div that i build. Take a look… maybe its my browser, i dont know.

I take a screenshot of the animation, when opens and close.

Thanks for your time man! Really thanks!

578×892 352 KB

10

On the following video I show you how to solve this, and the animation bug, and the other animation bug.

Basically, overflow hidden on the description container to hide the text while reducing the height, then remove the padding of the description container because it affects the height, preventing to be zero, and then removing the last step of your interaction, because it messes up with the height of the orange block. It’s one way to solve this last one, there’s many and cleaner.

Screencast here : Google Chrome – Tapes

1 Like
11

THANKS A LOT!

Now i can show this sites for other people, just to align things.

VERY THANKS FOR YOUR AWESOME TIME!!!