This is pretty doable with interactions.
Let’s make a simplified start that you can work out from!
Make a div that’ll wrap the entire shebang, then insert the desired image and two text fields.
One is the title that’ll always show, the other is the list or links or whatever that you’d like to appear when hovering.
Make the wrapper Relative.
Make the title text field Absolute and set it to “full”.
Align it 40% from the top and 60% from the bottom.
Align the text to mid
Result - an image with the title slightly above the middle point.
Do the same with the appearing text field, but align it 50% from the top and 50% from the bottom.
Result - an image with the title slightly above, and some text under it.
Make the appearing-text field 0% opacity. This is important.
Result - an image with the title slightly above, and some text under it (which is transparent):
You have now made all necessary fields and positions. You can style the text as you’d like, add more text, add links, whatever. I added some text shadow to make the text a bit more readable in my example.
Now let’s do the hover things. Select the wrapper in the navigation column on the left hand side and go to the Interactions tab at the top right.
First we need to make the extra text show on hovering.
Add a hover interaction with the + sign and choose “start an animation”.
On “on hover in” a new animation with the + sign.
Call it “reveal and blur” or whatever. Go to the left hand navigator column and select the “appearing-text” text field. Then back to the right hand side and add an action with the + sign. Select “opacity”.
Select “set as initial state” and “opacity” at 0%.
Add a new action (+ sign again) and add Opacity at 100%. Set a duration (I used 0.5 seconds) and easing to “ease”.
Now the text will fade in when you hover on the image. Let’s add an effect to blur the image.
Click on the image in the left hand navigator column, then click under the “appearing-text Opacity” field in the interaction pane on the right. Click on “Filter”.
Set it to start “with previous action”
Add a filter → blur. Set it to the desired effect.
Your right hand should look something like this:
Click done. The image will now blur, and the text will fade in. But it will stay like that, so we need another interaction for when the cursor leaves the image.
On to the “on hover out” (further down on the interaction side). Make a new timed animations with the + sign.
Same thing as before, select the appearing-text field, add an action (“opacity”), then set the opacity to 0%. No need for the “initial state” thing here.
Click the image in the left hand navigator column, add another action (“filter”), add a filter → blur with 0px blur.
You right hand should look something like this:
Click done.
Final result:
