默认效果图：

鼠标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添加视频播放按钮的更多相关文章

  1. C++ 调用 opencv 读取视频文件列表并处理

    //g++ trans_video.cpp -o trans_video `pkg-config opencv --libs --cflags` -L/usr/lib/x86_64-linux-gnu ...

  2. C#打开office文件,pdf文件和视频文件

    打开office文件 1 需要从网站下载dsoframer.ocx文件 2 把dsoframer.ocx文件复制到c:\windows\system32目录下 开始->运行->regsvr ...

  3. IIS虚拟目录内的视频文件访问出错：HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本，请添加处理程序。如果应下载文件，请添加 MIME 映射。

    MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开.多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式. 我是 ...

  4. 127使用 TableView 自带的单元格样式实现好友列表，另外在单元格中添加辅助按钮

    类似的做法如之前这篇随笔:114自定义UITableViewCell(扩展知识:为UITableViewCell添加动画效果) 相比之下:自定义 UITableViewCell 的内容灵活,可根据需求 ...

  5. chmod a+w . 权限控制 su、sudo 修改文件所有者和文件所在组 添加用户到sudoer列表中 当前用户信息

    对当前目录对所有用户开放读写权限 chmod a+r . $ sudo chmod -R a+w /usr/lib/python2.7 所有用户添加文件的写权限 [linux]su.sudo.sudo ...

  6. android 中获取视频文件的缩略图（非原创）

    在android中获取视频文件的缩略图有三种方法: 1.从媒体库中查询 2. android 2.2以后使用ThumbnailUtils类获取 3.调用jni文件,实现MediaMetadataRet ...

  7. Android 自定义View，仿微信视频播放按钮

    闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图...真的很简单哈. 由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友 ...

  8. 如何在asp.net中如何在线播放各类视频文件

    一.后台拼字符串动态加载写法 前台调用代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. [破解] DRM-内容数据版权加密保护技术学习（上）：视频文件打包实现

    1. DRM介绍: DRM,英文全称Digital Rights Management, 可以翻译为:内容数字版权加密保护技术. DRM技术的工作原理是,首先建立数字节目授权中心.编码压缩后的数字节目 ...

随机推荐

  1. RK3399配置笔记

    1. adb shell 默认超级管理员 在build/core/main.mk下将ADDITIONAL_DEFAULT_PROPERTIES += ro.secure=1改成ADDITIONAL_D ...

  2. Java8新特性之二：方法引用

    上一节介绍了Java8新特性中的Lambda表达式,本小节继续讲解Java8的新特性之二:方法引用.方法引用其实也离不开Lambda表达式. 1.方法引用的使用场景 我们用Lambda表达式来实现匿名 ...

  3. 从零到一详聊如何创建Vue工程及遇到的常见问题

    前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm in ...

  4. Jmeter + Grafana搭建实时监控可视化

    小贴士: 建议使用jmeter3.3+版本,在这个版本以后才有backend listenter 对接influxDB. Jmeter中backend listenter如图 ​ influxdbUr ...

  5. django中出现 错误 Errno 10053

    django中出现 错误 Errno 10053 pycharm里出现下面错误File "C:\Python27\lib\socket.py", line 307, in flus ...

  6. 物理dataguard 正常切换 脚色转换，switchover_status 状态改变

    正常切换切换前: 主库:SQL> select DATABASE_ROLE from v$database;DATABASE_ROLE----------------PRIMARY SQL> ...

  7. Python初识+条件语句+循环语句

    一.写照: 1.第一个程序 hello world print('hello world') 后缀名可以是任意(只是现在)(lx.py lx.ps) 导入模块时不是.py 就会出错 2.解释器路径 # ...

  8. Kafka的partions和replication-factor参数的理解

    Topic在Kafka中是主题的意思,生产者将消息发送到主题,消费者再订阅相关的主题,并从主题上拉取消息. 在创建Topic的时候,有两个参数是需要填写的,那就是partions和replicatio ...

  9. shell read的用法

    1. Read的一些选项 Read可以带有-a, -d, -e, -n, -p, -r, -t, 和 -s八个选项. -a :将内容读入到数值中 echo -n "Input muliple ...

  10. Oracle ADDM报告生成和性能分析

    我写的SQL调优专栏:https://blog.csdn.net/u014427391/article/category/8679315 对于局部的,比如某个页面列表sql,我们可以使用Oracle的 ...