I am fairly new to Webflow and having issues finding where to do certain things.
my client has 5 images to be put into 5 different columns. I could not find a 5 column layout, so I setup 6 columns and put an image into each of the first 5 columns. My plan was to delete the 6th column, however do not see where or how to delete the 6th column.
my client would like to have text (with a certain font, font color and font size) display under an image when the image is hovered on. I have each image in a link block, then looked at the triggers. There isn’t an option for adding text under the image while the image is hovered on.
I would use a grid - then you can decide however many ‘columns’ you want. Create a grid with 6 columns and then put your content within each column of the grid.
This is possible with interactions.
Setting up: Place the text where you would want it to be when the image is hover. Then with the image (or the item you’ll want to hover over) selected, go to interactions (top right corner). Next to ‘Element trigger’ click the + and select ‘Mouse hover’. Below ‘On hover’, select an action ‘Start an Animation’. Click the + to create a new ‘Timed Animation’ and give it a name.
The animation - hover in: Select the text that is to show when hovering over the image, then select the + next to ‘Timed Actions’. Select ‘Hide/Show’ and set as the initial state with display: none. Below that add another ‘Hide/Show’ with the display: block.
The animation - hover out: Duplicate the timed animation and below ‘On hover out’, select the duplicate. In the duplicated one, remove the action with the initial state and change the second ‘Hide/Show’ to display none.
Result: when you hover in the text should appear and when you hover out the text should disappear.
I really hope this helps. I apologise if it is a little confusing - I just wanted to make sure all the steps came across. Let me know if you don’t manage and I’ll try to make it more clear.
Hi Nicole, I am hoping you can help me with this. The animations work great, however my client doesn’t like that when hovering over one icon to another, the animation text is jumpy. Is there anything that can be done to keep it from being jumpy? Here’s a link to it.