视频文件列表hover添加视频播放按钮
默认效果图:
鼠标hover效果:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
.wrap{margin:300px auto;width:284px;position:relative;}
a{width:284px;height:290px;display:block;border:1px solid #ccc;overflow:hidden;}
i{display:none;position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;background:url(btn.png) no-repeat center center;width:60px;height:60px;}
img{width:100%;height:100%;transition:transform 0.2s;}
a:hover{border-image:url(bg.png) 1;}
a:hover i{display:block;}
a:hover img{transform:scale(1.1,1.1);}
</style>
<body>
<div class="wrap">
<a href="">
<img src="img.png" alt="" />
<i></i>
</a>
</div>
</body>
</html>
视频文件列表hover添加视频播放按钮的更多相关文章
- C++ 调用 opencv 读取视频文件列表并处理
//g++ trans_video.cpp -o trans_video `pkg-config opencv --libs --cflags` -L/usr/lib/x86_64-linux-gnu ...
- C#打开office文件,pdf文件和视频文件
打开office文件 1 需要从网站下载dsoframer.ocx文件 2 把dsoframer.ocx文件复制到c:\windows\system32目录下 开始->运行->regsvr ...
- IIS虚拟目录内的视频文件访问出错:HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。如果应下载文件,请添加 MIME 映射。
MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开.多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式. 我是 ...
- 127使用 TableView 自带的单元格样式实现好友列表,另外在单元格中添加辅助按钮
类似的做法如之前这篇随笔:114自定义UITableViewCell(扩展知识:为UITableViewCell添加动画效果) 相比之下:自定义 UITableViewCell 的内容灵活,可根据需求 ...
- chmod a+w . 权限控制 su、sudo 修改文件所有者和文件所在组 添加用户到sudoer列表中 当前用户信息
对当前目录对所有用户开放读写权限 chmod a+r . $ sudo chmod -R a+w /usr/lib/python2.7 所有用户添加文件的写权限 [linux]su.sudo.sudo ...
- android 中获取视频文件的缩略图(非原创)
在android中获取视频文件的缩略图有三种方法: 1.从媒体库中查询 2. android 2.2以后使用ThumbnailUtils类获取 3.调用jni文件,实现MediaMetadataRet ...
- Android 自定义View,仿微信视频播放按钮
闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图...真的很简单哈. 由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友 ...
- 如何在asp.net中如何在线播放各类视频文件
一.后台拼字符串动态加载写法 前台调用代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- [破解] DRM-内容数据版权加密保护技术学习(上):视频文件打包实现
1. DRM介绍: DRM,英文全称Digital Rights Management, 可以翻译为:内容数字版权加密保护技术. DRM技术的工作原理是,首先建立数字节目授权中心.编码压缩后的数字节目 ...
随机推荐
- MySQL 上手教程
安装 通过官网选择版本下载安装.Mac 上可通过 Homebrew 方便地安装: $ brew install mysql 检查安装是否成功: $ mysql --version mysql Ver ...
- Gradle入门到实战(一) — 全面了解Gradle
声明:本文来自汪磊的博客,转载请注明出处 可关注个人公众号,那里更新更及时,阅读体验更好: 友情提示由于文章是从个人公众号拷贝过来整理的,发现图片没有正常显示,没关注公众号的同学可通过如下链接查看: ...
- re模块的方法总结
re模块的方法总结 一,查找 1:match 匹配string 开头,成功返回Match object, 失败返回None,只匹配一个. 示例: s="abc221kelvin4774&qu ...
- SuperMap iObject入门开发系列之四管线长度统计
本文是一位好友“托马斯”授权给我来发表的,介绍都是他的研究成果,在此,非常感谢. 上一期文章主要写了管线系统的标注功能,结合代码简单讲解了一些超图.NET开发框架气泡Bubble的使用方法,这期的文章 ...
- 底部导航栏-----FragmentTabHost
[说明] 1.主界面上添加父容器:FragmentTabHost 属于v4兼容包 需要指定该id为android:id/tabhost,不能修改,表示由android系统来托管这个id. 本身是一个F ...
- 通过命令行设置Windows 时区
我们在进行自动测试的时候,不同的测试程序对于时区的要求不同,所以在开始的时候需要根据测试程序的要求了设置时区. Windows 提供了一个工具来进行时区设置.tzutil.exe. 目录:C:\Win ...
- 【工具篇】抓包中的王牌工具—Fiddler (2-工具介绍)
Fiddler 抓包工具界面简介 1) 字段说明 Fiddler想要抓到数据包,要确保Capture Traffic是开启,在File –> Capture Traffic. 开启后再左下角会有 ...
- springboot实现数据库中数据导出Excel功能
[转载]原文地址:https://blog.csdn.net/wilson_m/article/details/79021458 功能介绍 网上查找了一堆的数据导出代码,可能是自己基础比较薄弱的原因还 ...
- asp.net core导出导入excel
使用NPOI导入导出excel,已经封装好Action可以直接调用 导出 效果图 使用方法 定义导出实体 class Student { public int Id { get; set; } pub ...
- 进行API开发选gRPC还是HTTP APIs?
上一篇文章我带着大家体验了一把<ASP.NET Core 3.0 上的gRPC服务模板初体验(多图)>,如果有兴趣的可以点击链接进行查看,相信跟着做的你,也是可以跑起来的.这篇文章我们将一 ...