html按钮悬停,html – 仅在悬停时显示按钮

我已经阅读并尝试了其他解决方案来解决我的问题,但似乎都没有.

我有3张图片,每张图片都在他们自己的4列div中.我设置了css过渡,以便当用户的鼠标悬停在图像上时,这些图像从灰度渐变为彩色.我现在需要在悬停时出现一个按钮.我附上了一张图片来说明我的意思.

这里是我的HTML和CSS的中间4列的片段.

——————— HTML ———————

View Jane's Profile

——————— CSS ———————

.greyish {

background: $smoke !important;

h1 {

margin: rem-calc(100) 0 0;

}

img {

filter: url("data:image/svg+xml;utf8,#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;

}

}

}

注意：我使用SCSS,因此看起来很奇怪,嵌套的CSS规则.