html – bootstrap 3 – 悬停对autoloop视频的影响

我试图将悬停效果放在像这个网站这样的自动循环视频上 – http://campaign.mcdonalds.com.tw/McCafe/

this part of the website

在悬停之前,自动循环视频具有叠加层.

悬停时,叠加层将消失,视频将放大一点.

我怎样才能实现这种悬停效果？

解决方法

一些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.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>