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

You can set class to the image container and show the button on hover the image container.

Please check this link with working example:

.img-container:hover .button {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

Answer 2

You could use a simple img:hover + .button to select the link (the + selects the next element if it matches the .button selector)

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

<div class="small-4 columns">
  <img src="http://placehold.it/350x150">
  <a class="button" href="/jane/">View Jane's Profile</a>
</div>

Alternatively if the button isn't over the image, you could use :hover on a wrapper element, which avoids the problem of the image no longer being hovered when you want to click the button (the button would disappear when you try to click it, as seen in the above example)

.button {
  display: none;
}
.wrapper:hover img {
  /* Change the filter in here */
}
.wrapper:hover .button {
  display: inline-block;
}

<div class="small-4 columns">
  <div class="wrapper">
    <img src="http://placehold.it/350x150">
    <a class="button" href="/jane/">View Jane's Profile</a>
  </div>
</div>

Answer 3

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

Answer 4

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).