Javascript 在图像悬停后，如何使其上方显示菜单？

我正在创建一个公文包页面，该页面将显示我处理过的不同事情的图像。当我将鼠标悬停在图像上时，我希望它变灰（好像有一个div以0.4的不透明度覆盖它），并在图像上弹出几个按钮（查看源、查看演示）

我想把这些“公文包项目”放在三个引导列中。我看了一下在它上面重叠一个div，这个div在使用z索引悬停之前是隐藏的，但我不知道如何定位它，同时使用bootstrap保持它的响应

这是我到目前为止所拥有的。还有其他更简单的方法吗

<div id="portfolio-page">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2" id="portfolio-items">
            <div class="row">
                <div class="col-lg-4">
                    <div class="portfolio-item">
                        <img src="includes/img/headers.jpg" class="img-responsive"></img>
                    </div>
                </div>            
            </div>
        </div>        
    </div>
</div>

我的投资组合

你只需要一点CSS就可以做到这一点

我已将

.portfolio\u text

的不透明度设置为0，但当您将鼠标悬停在其父项

.portfolio

上时，我将其设置为1。我还添加了一个过渡，使其淡入淡出，而不是突然出现

.portfolio{
位置：相对位置；
高度：200px；
宽度：200px
}
.投资组合img，
.portfolio_文本{
宽度：100%；
身高：100%
}
.portfolio_文本{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
颜色：#fff；
排名：0；
左：0；
背景：rgba（100100100.4）；
不透明度：0；
过渡：不透明度.3s立方贝塞尔（.25、.8、.25、1）
}
.portfolio:hover.portfolio_text{
不透明度：1
}

看看我的钮扣
按钮1
按钮2
按钮3