如何在网站上添加播放按钮覆盖

Posted 2021-03-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在网站上添加播放按钮覆盖相关的知识，希望对你有一定的参考价值。

我一直遇到各种播放按钮选项的问题。这次我从codepen.io/martinkrulltott/pen/xwrXwR复制了

My version

http://www.leatherspin.com/TEST.html

答案

检查此解决方案添加叠加播放按钮

.video-thumbnail {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 30px;
}
.top-img {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 30px;
}
.btm-img {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 30px;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.7);
  text-align:center;
  }
.top-img:hover .overlay ,.btm-img:hover .overlay {
  opacity: 1;
}
.overlay i
{
  color:#fff;
  top: 42%;
  transform: translate(-50%,0);
  position: absolute;
  font-size:50px;
 }

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="video-thumbnail top-img">
        <img src="http://www.leatherspin.com/Girl-in-leather-gloves-with-gun-leather-jacket-overknee-leather-boots-8.jpg" alt="Video thumbnail">
        <div class="overlay">
          <i class="fa fa-play"></i>
        </div>
</div>

<div class="video-thumbnail btm-img">
        <img src="http://www.leatherspin.com/girl-with-gun-leather-gloves-leather-pants-boots-170.jpg"                   alt="Video thumbnail">
          <div class="overlay">
            <i class="fa fa-play"></i>
          </div>
</div>

以上是关于如何在网站上添加播放按钮覆盖的主要内容，如果未能解决你的问题，请参考以下文章