在缩略图上附加播放按钮

时间:2018-06-10 12:07:15

标签: css

我想在我的视频缩略图上附加播放按钮(用CSS制作),但我有问题。在小型设备上看起来像:

enter image description here

但如果我想扩大我的窗口,它看起来像:

enter image description here

1: 无论我是否扩大窗口,都可以选择将其严格设置在此缩略图的中心位置?

    .video img
    {
    	width: 100%;
    }
    
    .play-button-outer {
      margin: 25% auto;
      width: 50px;
      height: 50px;
      background-color: #fe6a00;
      cursor: pointer;
      border-radius: 50%;
      position: relative;
      top: -185px;
      left: 20px;
    }
    
    .play-button {
      margin: 0 auto;
      top: 30%;
      position: relative;  
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 9px 0 12px 17px;
      border-color: transparent transparent transparent #FFF;
      opacity: .75;
    }
    
    .play-button-outer:hover .play-button {
      opacity: 1;
    }
        <div class="video">
			<img src="img/video-thumb.png">
			<div class="play-button-outer">
  				<div class="play-button"></div>
			</div>
		</div>

2 个答案:

答案 0 :(得分:0)

这是你想要的吗?

我已经确定了.play-button-outer 绝对

的位置
 top: 50%;
 left: 50%;
 transform:translate(-50%,-50%);

上述行将确保它始终保持在视频的中心(垂直和水平)。

此外,您还需要设置.video 亲戚

的位置

&#13;
&#13;
.video img {
  width: 100%;
  position: relative;
}

.video {
  position: relative;
}

.play-button-outer {
  width: 50px;
  height: 50px;
  background-color: #fe6a00;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-button {
  margin: 0 auto;
  top: 30%;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 12px 17px;
  border-color: transparent transparent transparent #FFF;
  opacity: .75;
}

.play-button-outer:hover .play-button {
  opacity: 1;
}
&#13;
<div class="video">
  <img src="https://placehold.it/200x200">
  <div class="play-button-outer">
    <div class="play-button"></div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是一种可重复使用的标准方式,可以垂直和水平对中:

position: absolute;
top: 50%; /* this percentage relates to the parent element */
left: 50%; /* this percentage relates to the parent element */
transform: translate(-50%, -50%); /* this percentage relates to the element itself */

请注意,为了使其按照您期望的方式工作,需要定位父容器(即,它不能具有position: static;这是默认值。

.video img {
  position: relative;
  width: 100%;
}

.play-button-outer {
  width: 80px;
  height: 80px;
  background-color: #fe6a00;
  cursor: pointer;
  border-radius: 50%;
  opacity: .75;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}

.play-button {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 12px 17px;
  border-color: transparent transparent transparent #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 2px), -50%);
}

.play-button-outer:hover {
  opacity: 1;
}
<div class="video">
  <img src="http://placekitten.com/1600/900">
  <div class="play-button-outer">
    <div class="play-button"></div>
  </div>
</div>