Question

我正在创建一个投资组合页面，其中包含我已经处理过的不同事物的图像。当我将鼠标悬停在图像上时，我希望它显示为灰色（好像有一个div与0.4不透明度重叠）以及一些按钮（查看源，视图演示）以弹出图像。

我想在三个bootstrap列中放置这些“组合项”。我看着重叠顶部的一个div，它将被隐藏，直到使用z-index悬停，但我无法弄清楚如何定位它同时使用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>

Answer 1

你需要一点CSS才能做到这一点。

我已将.portfolio_text的不透明度设置为0，但当您将鼠标悬停在其父.portfolio上时，我将其设置为1。我还添加了一个转换，因此它会消失，而不是只是弹出。

.portfolio {
  position: relative;
  height: 200px;
  width: 200px
}

.portfolio img,
.portfolio_text {
  width: 100%;
  height: 100%
}

.portfolio_text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #fff;
  top: 0;
  left: 0;
  background: rgba(100, 100, 100, .4);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.25, .8, .25, 1)
}

.portfolio:hover .portfolio_text {
  opacity: 1
}

<div class="portfolio">
  <img src="http://silayexportinc.com/wp-content/uploads/2016/09/placeholder-3.jpg" />
  <div class="portfolio_text">
    <span>Look at my Buttons</span>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</div>

如何在图片悬停后在图片上显示菜单？

1 个答案: