默认效果图：

鼠标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. 前端笔记之Vue（二）组件&案例&props&计算属性

    一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...

  2. ASP.NET Core中使用GraphQL - 最终章 Data Loader

    ASP.NET Core中使用GraphQL - 目录 ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间 ...

  3. Python爬虫入门教程 58-100 python爬虫高级技术之验证码篇4-极验证识别技术之一

    目录 验证码类型 官网最新效果 找个用极验证的网站 拼接验证码图片 编写自动化代码 核心run方法 模拟拖动方法 图片处理方法 初步运行结果 拼接图 图片存储到本地 @ 验证码类型 今天要搞定的验证码 ...

  4. 深入理解es6-Promise对象

    前言     在之前翻博客时,看到promise,又重读了一边,突然发现理解很浅,记的笔记也不是很好理解,又重新学习promise,加深理解,学以致用     在promise出来之前,js常用解决异 ...

  5. user 不在 sudoers 文件中。此事将被报告。

    在使用sudo -i或su root命令时,被提示出“user不在 sudoers 文件中.此事将被报告”的错误信息.这是因为当前登录的账号不在sudo权限里面.sudo命令可以让你以root身份执行 ...

  6. C#-Xamarin的Android项目开发(一)——创建项目

    创建项目 使用Xamarin开发安卓项目,首先需要安装VS2017以上版本.因为VS2017以上的版本,可以直接创建Xamarin项目. 另外用Xamarin开发安卓项目,还需要使用Intel的CPU ...

  7. 一般处理程序，将nvarchar值转换成数据类型int时失败

    系统:WIndows 10 工具:Visual Studio 2017 在写代码的过程中,我遇到了这样的一个问题.如图 vs错误提示是在SqlHelper中有错,可是怎么改都不能解决问题. 最后发现是 ...

  8. Android研发进阶之路

    前言 移动研发火热不停,越来越多人开始学习android开发.但很多人感觉入门容易成长很难,对未来比较迷茫,不知道自己技能该怎么提升,到达下一阶段需要补充哪些内容.市面上也多是谈论知识图谱,缺少体系和 ...

  9. SQL SERVER 查看近期死锁

    在项目运行的过程中,死锁不可能完全避免,但要尽可能减少死锁的出现, 产生死锁的原因主要是: 1,系统资源不足. 2,进程运行推进的顺序不合适. 3,资源分配不当等. 产生死锁的四个必要条件:- 互斥条 ...

  10. Windows Server 2016-命令行方式管理Windows服务

    Microsoft Windows 服务(过去称为 NT 服务)允许用户创建可在其自身的 Windows 会话中长时间运行的可执行应用程序. 这些服务可在计算机启动时自动启动,可以暂停和重启,并且不显 ...