如何在投资组合页面上创建这种悬停效果？

Question

我正在尝试在悬停时写下一个影响很小的主页。

看起来应该是这样的：

你会怎么做？我的代码不能正常运行。

.stage_wrapper {
  margin: 0 auto;
  width: 1100px;
  height: auto;
}
.work {
  margin-left: 8px;
  margin-right: 5px;
  margin-bottom: 15px;
  display: inline-block;
  height: 350px;
  width: 350px;
}
.work img {
  width: 350px;
  height: auto;
}

<div class="stage_wrapper">
  <div class="stage">
    <div class="work">
      <a href="#" target="_blank">
        <img src="//dummyimage.com/350" class="media" alt="#" />
        <div class="caption">
          <div class="work_title">
            <h1>Something in 3 rows</h1>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 1

这样的东西？

<form action="search2.php" method="post" accept-charset="UTF-8">

.work {
  width: 300px;
  height: 300px;
  line-height:300px;
  text-align: center;
  background-color: #2d3e50;
  border: 10px solid #2a81b9;
  color: white;
  display: inline-block;
}
.work span {
  display: none;
  vertical-align: middle;
}
.work:hover span {
  display: inline-block;
}
.work:hover img {
  display: none;
}

Answer 2

您尝试获取以下代码段吗？

.work {
  display: inline-block;
  height: 150px;
  text-align: center;
  color: white;
  border: 10px solid gray;
  position: relative;
}
.work div {
  position: absolute;
  left: 0; top: 0;
  height: 100%; width: 100%;
  background: gold;
  display: none;
}
.work h2 {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0; padding: 0;
}
.work:hover div {
  display: block;
}

<div class="work">
  <img class="portfolio-image" src="http://dummyimage.com/150" />
  <div><h2>Heading</h2></div>
</div>