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.
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With