默认效果图：

鼠标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. Docker 集群

    1.  理解swarm swarm(译:集群) 一个swarm是一组运行着Docker的机器,它们一起加入到一个集群.swarm中的机器既可以是物理机,也可以是虚拟机.在加入到一个swarm后,每台机 ...

  2. Java进阶篇之十五 ----- JDK1.8的Lambda、Stream和日期的使用详解(很详细)

    前言 本篇主要讲述是Java中JDK1.8的一些新语法特性使用,主要是Lambda.Stream和LocalDate日期的一些使用讲解. Lambda Lambda介绍 Lambda 表达式(lamb ...

  3. Java多线程与并发面试题

    1,什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一 ...

  4. PHP开发模式之-单例模式

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class  Db{ private function __construct(){} private static ...

  5. 基于Vue2-Calendar改进的日历组件（含中文使用说明）

    一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅…… 于是网上搜了好久找到了 ...

  6. Spring之AOP详解

    文章大纲 一.AOP介绍二.Spring的AOP实战三.AOP常用标签四.项目源码及参考资料下载五.参考文章   一.AOP介绍 1. 什么是AOP 在软件业,AOP为Aspect Oriented ...

  7. [20190402]关于semtimedop函数调用2.txt

    [20190402]关于semtimedop函数调用2.txt --//前几天做了sql语句在mutexes上的探究.今天看看_mutex_wait_time设置很大的情况下是否semtimedop会 ...

  8. Windows Server 2016-OU组织单位日常操作

    技术无所谓贵贱,既然曾经做过就总该是要留下点什么,毕竟做技术这些年给我们留下太多太多的成长经历,总有人问这些已经很皮毛了为什么还要写,其实没那么多花哨理由,就是想着做或者不做这一块总是要对过往做个简单 ...

  9. Scala实现Try with resources自动关闭IO

    在处理数据库连接或者输入输出流等场景时,我们经常需要写一些非常繁琐又枯燥乏味的代码来关闭数据库连接或输入输出流. 例如数据库操作: def update(sql: String)(conn: Conn ...

  10. 阿里如何实现海量数据实时分析技术－AnalyticDB

    导读:随着数据量的快速增长,越来越多的企业迎来业务数据化时代,数据成为了最重要的生产资料和业务升级依据.本文由阿里AnalyticDB团队出品,近万字长文,首次深度解读阿里在海量数据实时分析领域的多项 ...