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>

有關模態的更多信息