Show button on hover only

Question

I\'ve read around and tried other solutions to my problem but none seem to work.

I have 3 images, each within their own 4-column div. I have a css transition set up so t

Answer 1

here you go my friend:

div.small-4.columns img ~ a  {display:none;}
div.small-4.columns img:hover ~ a {display:block;}

UPDATE:

if you want the button to be clickable and not dissapear until you remove the move from the picture, use the following instead:

a.button {display: none;}
div.small-4.columns:hover > a.button {display:block;}

EXPLANATION:

a.button is to select the a with class .button
div.small-4.columns:hover selecting the div that has both classes .small-4 and .columns (parent of image)

> means child and ~ means sibling, in this case div.small-4.columns:hover > a.button {display:block;} we're telling it to display the child element which is a.button, when we hover div.small-4.columns