html - bootstrap 3 - 自动循环视频的悬停效果

Question

我正在尝试将悬停效果放在自动循环视频上，例如本网站 - http://campaign.mcdonalds.com.tw/McCafe/做

this part of the website

在悬停之前，自动循环视频有一个叠加层。

悬停时，叠加层会消失，视频会放大一点。

如何实现这种悬停效果？

Answer 1

一些 CSS 魔法:

.vid-container {
  width:100px;
  height:100px;
  background:#c90;
  transition: all 0.5s ease-out;
  position:relative;
}

.vid-container::after {
  content: " ";
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  left:0;
  transition: all 0.5s ease-out;
  pointer-events: none;
}


.vid-container:hover {
  transform: scale(1.2,1.2);
}

.vid-container:hover::after {
  opacity:0;
}

<div class="vid-container">
  Your video here
</div>