Show button only on hover

Question

I read and tried other solutions to my problem, but no one works.

I have 3 images, each in its own 4-column div. I have a css transition configured in such a way that these images fade from shades of gray to color when the user mouse hovers over the image. Now I need the button to appear on hover. I have attached an image to illustrate what I mean.

And here is a snippet of my HTML and CSS for the middle 4 columns.

--------------------- HTML ------------------ ---

<div class="small-4 columns">
    <img src="/wp-content/themes/adamslaw/assets/img/woman.png">
    <a class="button" href="/jane/">View Jane Profile</a>
</div>

--------------------- CSS ------------------ ---

.greyish {
background: $smoke !important;
h1 {
    margin: rem-calc(100) 0 0;
}
img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
  .button:hover {
    display: inline-block;
    }
  }
}

NOTE: I use SCSS, therefore, weird looking, nested CSS rules.

Answer 1

:

.button {
    display: none;
}

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

, css sibling +. : "" .button ( ) . .button:hover, , "" , ( , ).

Answer 2

img:hover + .button (+ , .button)

.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 Profile</a>
</div>

, , :hover , , , ( , ​​ , )

.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 Profile</a>
  </div>
</div>

Answer 3

:

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

:

, , dissapear, , :

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

:

a.button - a .button
div.small-4.columns:hover div, .small-4 .columns ( )

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

Answer 4

You can set the class in the image container and show the button when you hover over the image container.

Please check the link with a working example:

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

Run code