E.Owen E.Owen - 7 days ago 5
CSS Question

Show button on hover only

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 that these images fade from grayscale to colour when the user's mouse hovers over the image. I now need to get a button to appear on hover. I have attached an image to illustrate what I mean.

enter image description here

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's 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 am using SCSS, hence the strange-looking, nested CSS rules.

Answer

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