我试图将悬停效果放在像这个网站这样的自动循环视频上 –
http://campaign.mcdonalds.com.tw/McCafe/
在悬停之前,自动循环视频具有叠加层.
悬停时,叠加层将消失,视频将放大一点.
我怎样才能实现这种悬停效果?
解决方法
一些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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。