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:

.button {
    display: none;
}

img:hover + .button, .button:hover {
    display: inline-block;
}

By doing this, we're using the adjacent sibling css selector +. The selector is pretty simple: on image "hovering", you select .button (its sibling) and display it. Here, I added .button:hover so that when the user "hovers" the button, it keeps it visible (prevent a blinking effect as the user moves the mouse over the button).