Question

我正在设置多个Bootstrap媒体对象，我希望当鼠标悬停时，FontAwesome图标以覆盖图的形式显示在图像上，一旦单击，将打开一个花哨框。

我已经尝试了很多移动，但是从这个角度来说，我认为我具有隧道视野。请帮忙！

我的代码段：

/**The CSS I've been trying to use: **/

  .overlay-hover:hover .image {
    opacity: 0.85;
    transition: 1s ease;
  }
  .overlay-hover:hover .overlay {
    opacity: 1;
  }
  .overlay {
    transition: 1s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }

    <div class="card bg-light mb-3 shadow">
      <div class="card-body">
        <div class="media">
           <img src="https://via.placeholder.com/150x300"style="height:125px;width: auto" class="mr-3" alt="...">
           <div class="media-body">
           <h5 class="mt-0">Title</h5>
           <p>Text</p>
           <span class="badge badge-primary">One</span>
           </div>
        </div>
      </div>
    </div>

无法获得我想要的结果，因此希望有人能够轻松告诉我我做错了什么。

Answer 1

这就是您要寻找的？

   
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  padding: 1em 0;
  float: left;
  width: 50%;
}

@media screen and (max-width: 640px) {
  .container {
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .container {
    width: 33.33333%;
  }
}

.container .title {
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay {
  opacity: 1;
}

.content-image {
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.fadeIn-bottom {
  top: 90%;
}

.media-body {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.card-body {
  padding: 0!important;
}
.card-body {
  background-color: red!important;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row ">
    <div class="col-sm-6 card bg-light  shadow ">
      <h4 class="text-center">Card 1</h4>
      <div class=" card-body">
        <div class="container">
          <div class="row">
            <div class="col-9">

              <div class="content">
                <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
                  <div class="content-overlay"></div>
                  <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
                  <div class="content-details fadeIn-bottom">
                    <a href="#"><i class="fab fa-html5"></i></a>
                  </div>
                </a>
              </div>
            </div>
            <div class="col-3">
              <div class="media-body">
                <h5 class="mt-0">Title</h5>
                <p>Text</p>
                <span class="badge badge-primary">One</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="col-sm-6 card bg-light  shadow ">
      <h4 class="text-center">Card 2</h4>
      <div class=" card-body">
          <div class="container">
            <div class="row">
              <div class="col-9">

                <div class="content">
                  <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
                    <div class="content-overlay"></div>
                    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
                    <div class="content-details fadeIn-bottom">
                      <a href="#"><i class="fab fa-html5"></i></a>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-3">
                <div class="media-body">
                  <h5 class="mt-0">Title</h5>
                  <p>Text</p>
                  <span class="badge badge-primary">One</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

我的叠加层会影响整张卡片，而不仅仅是图像

1 个答案: