Question

我尝试保留我的叠加层＆＃34; Play＆＃34;按钮位于每个分辨率显示屏上另一张照片的正中心。

我最好的结果是：

＆＃13;

.posForHover {
  position: relative;
}

.posForHover:hover .btnPlayHover {
  opacity: 1 !important;
}

.opaShadSelect:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.btnPlayHover {
  opacity: 0;
  position: absolute;
  top: 24%;
  left: 34%;
  background: url(https://image.noelshack.com/fichiers/2018/03/4/1516308587-
 video-play-icon.png) center;
  background-size: cover;
  height: 172px !important;
  width: 172px;
  color: white;
}

＆＃13;

<div class="col-lg-12">
  <a class="" href="#">
    <div class="posForHover">
      <img class="img-responsive img-rounded opaShadSelect" src="https://i.ytimg.com/vi/J3kd6y6e1mg/maxresdefault.jpg">
      <span class=" btnPlayHover"></span>
    </div>
  </a>
</div>

＆＃13;

但当我切换到显示分辨率

时，这并不完美

在https://jsfiddle.net/DTcHh/41899/

上进行测试有人可以帮帮我吗？

Answer 1

使用transform和position:absolute组合垂直和水平居中按钮

＆＃13;

.posForHover {
  position: relative;
}
img{display:block;max-width:100%;}
.posForHover:hover .btnPlayHover {
  opacity: 1 !important;
}

.opaShadSelect:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.btnPlayHover {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(https://image.noelshack.com/fichiers/2018/03/4/1516308587-video-play-icon.png) center;
  background-size: cover;
  height: 172px !important;
  width: 172px;
  color: white;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="col-lg-12">
  <a class="" href="#">
    <div class="posForHover">
      <img class="img-responsive img-rounded opaShadSelect" src=" https://i.ytimg.com/vi/J3kd6y6e1mg/maxresdefault.jpg">
      <span class="btnPlayHover"></span>
    </div>
  </a>
</div>

＆＃13;

把一张照片放在另一张照片中并用css保持在中心位置

1 个答案: