悬停时如何在图像上添加按钮和文本（HTML/CSS/Bootstrap 3）

Question

当我成功地将光标悬停在图像上时，我能够在图像上显示两个跨度文本元素。但是我无法在项目名称下方放置一个以图像为中心的按钮。任何帮助，将不胜感激。我还应该注意我要使用的按钮来自 Bootstrap 3 类。

这是一个演示： https://jsfiddle.net/oo1xx006/3/

这是我要创建的示例：http://www.devonstank.com/

HTML：

<div class="latest_projects">
<!-- My latest projects -->
  <h1>My latest projects</h1>
  <br>
  <ul class="projects-list">
    <li>
      <img src="img/mudmat-global-model.jpg" alt="DOF Mudmat Lowering" width="380px" height="380px"/>
      <span class="text-content">
          <span class="project-type"><i>Project Type</i></span>
          <span class="project-name">Project Name</span>
          <!-- <a href="#" class="btn btn-default project-name" role="button"><span>View project</span></a> -->
      </span>
    </li>
  </ul>
  <br>
  <a href="portfolio" class="btn btn-default" role="button">View more projects</a> 
</div>

CSS：

body {
    padding-top: 0;
    font-family: 'PT Sans', sans-serif;
    background-color: white;
}

h1 {
/*  margin: 15px 0;*/
    font-size: 1.9em;
    font-weight: normal;
    color: #000;
    line-height: 120%;
    text-align: center;
}

h2 {
    font-size: 1.3em;
    margin: -5px 0 0;
    font-weight: normal;
    color: #000;
    text-align: center;
}

a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

a:hover {
    text-decoration: none;
}

p {
    line-height: 200%;
    padding: 0 10% 0 10%;
    font-size: 1.1em;
    text-align: center;
}

.btn-default {
    border-color: #000;
    border-radius: 0;
    border-width: 2px;
    color: #000;
    font-size: 1.5em;
}

.btn-default:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
    border-radius: 0;
    border-width: 2px;
}

img {
    max-width: 100%;
}    


/************************************
HOME
************************************/

.latest_projects {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.latest_projects p {
    margin: 0;
    color: transparent;
}

.fluid-container img {
    height: 350px;
    width: 350px;
    margin-bottom: 20px;
    vertical-align: middle;
}



/*******Project Images******/    

ul.projects-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.projects-list li {
  display: inline-block;
  height: 380px;
  position: relative;
  width: 380px;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 380px;
  left: 0;
  position: absolute;
  top: 0;
  width: 380px;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 380px;
  left: 0;
  position: absolute;
  top: 0;
  width: 380px;
  opacity: 0;
}

ul.projects-list li:hover span.text-content {
  opacity: 1;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 380px;
  left: 0;
  position: absolute;
  top: 0;
  width: 380px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

span.project-type {
    position: absolute;
    text-align: center;
    /*margin: 25px 0;*/
    padding: 120px;
    width: 380px;
    vertical-align: middle;
    font-size: 1.7em;
}

span.project-name {
    font-size: 2.5em;
}

span.view-project {
    position: absolute;
    text-align: center;
    /*margin: 25px 0;*/
    padding: 10px;
    width: 380px;
    vertical-align: middle;
    font-size: 1.7em;
}

Answer 1

您可以使用 Javascript 来做到这一点。基本上你有一个容器，如果你将鼠标悬停在里面，你需要在里面看到/使用额外的内容。我建议您应该添加所需的 html，但使用 display: none; CSS 规则，然后您需要在用户悬停容器时显示它，如果用户离开容器则隐藏它。这是你可以用 jQuery 做到的：

$(".yourcontainerclass").mouseenter(function() {
    $(this).find(".yourinnerclass").hide();
});

$(".yourcontainerclass").mouseout(function() {
    $(this).find(".yourinnerclass").show();
});