Solved Hover button to reveal another element

Hello everyone !
I have a 3-column row, each column contains, in this order :
- a button
- a hidden image just below it
I would like to reveal/hide each image (with transitions, so it looks smooth) when the button within the same column is hovered on/out.
I've been searching and I found ways to do it with css and classes or IDs... but I think somehow my selectors are all wrong and I can't get it to work
Hope someone will be able to help, thanks in advance !

 

Thank you for your reply ! Unfortunately, this is not what I am looking for... the crazy thing about this, it's a simple Javascript thing we used to do back in 2001 to give a bit of interactivity to web pages :
- hover some element to the left of the page
- another element magically pops up, or changes color, or whatever, to the right of the page, in an entirely different section or div.
...no sliding sections, nothing fancy, just a "simple" display:none / display:visible on some element (with smooth transitions would be nice).

And I can't get it to work, whether I try to use css, js, or jquery.

This is driving me crazy :-D :-D :-D

Here's a screenshot of my setup : 3 columns, in each of which the images below the buttons are all hidden, until someone hovers the relevant button to display just the one image directly below this button. Then on "mouse out" the image disappears again. Or changes color, or jumps up... anything really, if I can select it properly then I can probably get it to do whatever I want (I hope ;-)

Any ideas welcome... I found several tutorials, but my guess is I'm getting those Divi css selectors all wrong.
Thanks anyway for your time, hope someone will be able to help.

Cheers !

 

...aaaaaand it does work ! :-D :-D :-D

I just had to add a "display:none" to my images so that they wouldn't show on the page at the beginning.

Thank you so much, wish you the best of days ^_^