默认效果图：

鼠标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. 分析Class类和ClassLoader类下的同名方法getResourceAsStream

    在读取本地资源的时候我们经常需要用到输入流,典型的场景就是使用Druid连接池时读取连接池的配置文件.Java为我们提供了读取资源的方法getResourceAsStream(),该方法有三种: Cl ...

  2. object类和内部类

    1.Object object类是所有类的根类(父类). 如果一个类没有显示继承另外一个类,那么该类一定继承于object类. toString()返回对象字符串的的形式. public class ...

  3. 深入学习Redis（2）：持久化

    前言 在上一篇文章中,介绍了Redis的内存模型,从这篇文章开始,将依次介绍Redis高可用相关的知识——持久化.复制(及读写分离).哨兵.以及集群. 本文将先说明上述几种技术分别解决了Redis高可 ...

  4. 使用MediatR重构单体应用中的事件发布/订阅

    标题:使用MediatR重构单体应用中的事件发布/订阅 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/10640280.html 源代码:https ...

  5. 使用 ASP.NET Core MVC 创建 Web API（五）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  6. c# 接口相同方法申明使用

    using System; namespace ConsoleApp1 { interface IInterface1 { void ft(); } interface IInterface2 { v ...

  7. C# 获取系统当前IE版本号

    1. 注册表中,IE的位置: 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer 2. 通过注册表读取IE配 ...

  8. 用python复制图片、视频

    图片复制 f_src = open('1.jpg','rb') content = f_src.read() f_copy = open('1-副本.jpg','wb') f_copy.write(c ...

  9. Java并发——CAS

    什么是CAS? CAS是Compare And Swap的简称.在Java中有很多实现,比如compareAndSwapObject()方法,或者compareAndSwapInt()方法等.多用在包 ...

  10. vue3+typescript引入外部文件

    vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...