默认效果图：

鼠标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. 再好好聊聊 HTTP 里的 Cookie | 实用 HTTP

    题图:by Juan Pablo Arenas 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Hea ...

  2. 我的Lambda的学习笔记

    前述 Lambda表达式是 Java 8 的新特性.许多语言都有 Lambda 的特性. 因此使用的 Java 环境一定要 8 以上的环境. Lambda 到底什么是 Lambda 表达式呢? Lam ...

  3. windows,分割路径.得出目录

    #include <windows.h> #include <vector> #include <stdio.h> #include <string> ...

  4. ubuntu中使用docker部署.netcore2.1

     概述    .netcore发布这么久,到现在才在项目中实际运用,之前算是了解一点,一般找工作都会问是否运用过.netcore,软件研发来说,如果这个技术没用过,觉得挺难,其实不难..netcore ...

  5. 设计模式系列19：策略模式（Stragety Pattern）

    定义 定义一系列算法,将它们一个个封装起来,并且使它们可以互相替换,该模式使得算法可独立于使用它的客户而变化.    --<设计模式>GoF UML类图 使用场景 一个系统有许多类,而区分 ...

  6. Sharepoint模态窗体（实战）

    分享人:广州华软 无名 一. 前言 对SharePoint二次开发时,需要知道SharePoint有什么.没有什么,才能在开发过程中避免重复造轮子.SharePoint提供了许多开箱即用的功能,这次要 ...

  7. [Android 除錯] Conflict with dependency

    Android Studio build 時的錯誤訊息 : Conflict with dependency 詳細錯誤訊息 : Conflict with dependency 'com.androi ...

  8. 理解Device Tree Usage（续）

    4 How Interrupts work   与遵循树的自然结构的地址范围转换不同, 中断信号可以起源于或者终止于板卡上的任何设备. 与设备树中自然表示的设备寻址不同,中断信号的表示独立于设备树节点 ...

  9. 关于windows系统无法更新的解决方法

    操作系统无法更新解决方案! 1．检查网络连接是否正常: 2．检查控制面板设置,windows更新是否开启: 3．检查计算机-管理-服务和应用程序-服务组件里的windows update是否开启: 4 ...

  10. vue 过滤器 基本用法

    使用地点:双花括号插值和v-bind表达式. <div id="app"> <p>{{ message|capitalize}}</p> < ...