Question

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

在悬停之前，自动循环视频正在叠加。

悬停时，叠加层将消失，视频会稍微放大。

如何实现这种悬停效果？

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>

Answer 2

我为您创建了FIDDLE，向您展示如何使用scale属性向上或向下缩放视频，以及如何控制视频的不透明度。

<强> HTML：

  <iframe width="560" height="315" src="https://www.youtube.com/embed/ie-C7DQVNKw" frameborder="0" allowfullscreen></iframe>

<强>的CSS：

iframe {
    transform: scale(1, 1);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

iframe:hover {
    transform: scale(1.1,1.1);
    filter: alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
}

<强>解释

所以，我在这里做两件事：

对于正常状态，我使用transform属性将视频缩放到1,1这是可选的，不需要但仍然保留给你让你理解。

当我将鼠标悬停在div上时，iframe缩放为（1.1,1.1），这意味着x和y方向的尺寸增加了10％。

对于悬停状态，我已将不透明度应用于iframe。

bootstrap 3 - 悬停对autoloop视频的影响

2 个答案: