Bootstrap - 图像到 gif 到模态

Question

我目前正在使用 bootstrap、html 和 css，但对这一切都是全新的，真的希望你能提供帮助。我试图在悬停时将图像更改为 gif，然后在单击时更改为模态。这将用于类似于 www.electricpulp.com/about/ 的团队页面。

这是我的代码：

HTML

<figure> 
    <div id="user-01" class="img-responsive figure-img img-fluid">
    </div>
    <figcaption class="figure-caption"> 
    <b>Norman Coleman</b><br>Data Analyst</figcaption> 
    </figure>

CSS

#user-01 {
  background: url("../images/team/user-01.jpg") no-repeat;
  background-repeat: no-repeat;
  background-size: 250px;
  height: 250px;
  background-position: center;
  }

#user-01:hover {
  background: url("../images/team/giphy-01.gif") no-repeat;
  background-repeat: no-repeat;
  background-size: 250px;
  height: 250px;
  background-position: center; }

大约 20 名团队成员需要这个。我知道必须有一种更短的方法（javascript 或 jquery），但在我的一生中无法在网上找到任何按预期工作的东西。

提前致谢 克莉丝

Answer 1

欢迎来到 StackOverflow，

要获得更干净和干燥的 CSS 文件，您应该使用 CSS 的级联功能。 为具有所有常见样式的用户元素使用一个类：

.user {
  background-repeat: no-repeat;
  background-size: 250px;
  height: 250px;
  background-position: center;
}

仅对背景图像使用 ID：

#user-01 {
  background: url("../images/team/user-01.jpg") no-repeat;
}

#user-01:hover {
  background: url("../images/team/giphy-01.gif") no-repeat;
}

要在 Bootstrap 中打开模式，请将此参数添加到具有用户类的 DIV：

<div id="user-01" class="img-responsive figure-img img-fluid user" data-toggle="modal" data-target="#myModal"></div>

并将此代码用于模态：

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

more info on modals