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 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;
}

  
  View Jane's Profile

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;
}

  

    
    View Jane's Profile