效果图如下：

代码：

<body>

    <div><img src="jd.jpg"></div>

</body>
       img{

            width: 250px;

            height: 250px;

            transition: all 0.6s;/* 过渡效果，图片实现效果，写在图片上 */

        }

        div{

            width: 240px;/* 宽度比图片宽度少10px */

            height: 250px;

            border: 1px solid rgb(194, 188, 188);

            overflow: hidden;/*图片超过部分切掉  */

        }

        div:hover img{

            margin-left: -10px;/* 鼠标经过盒子，图片向左移动10px */

        }

鼠标经过图片会移动（css3过渡，overflow：hidden）的更多相关文章

  1. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  5. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

  6. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  7. CSS3实现鼠标经过图片时图片放大

    在鼠标经过图片时,图片被放大,而且还有个过渡的效果.... <!DOCTYPE html> <html> <head> <link href="cs ...

  8. css3鼠标悬停图片边框线条动画特效

    css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class ...

  9. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

随机推荐

  1. AQS（AbstractQueuedSynchronizer）

    AbstractQueuedSynchronizer 是一个锁框架.实现的原理(大概): 1.关于重入锁方面的实现,参考(手写一个可重入锁). 2.关于公平锁方面的实现,使用双链表的形式,进行公平锁的 ...

  2. mysql_select 多表查询

    一.等值连接 原理:将多张单表组成一张逻辑大表   语法: select *  from 表A,表B   where 表A.主键=表B.外键 and 查询条件 select *  from 表A,表B ...

  3. Luogu4233 射命丸文的笔记 DP、多项式求逆

    传送门 注意到总共有\(\frac{n!}{n}\)条本质不同的哈密顿回路,每一条哈密顿回路恰好会出现在\(2^{\binom{n}{2} - n}\)个图中,所以我们实际上要算的是强连通有向竞赛图的 ...

  4. 全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下

    KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 asyn ...

  5. shell-基础2-字符串文本处理${}

    一.为什么使用${}引用变量 1.$a和${a}的效果与区别 因为个别特殊字符会影响正常引用,所以需要使用${}引用变量,加花括号是为了帮助解释器识别变量的边界 $a和${a}效果一样,当变量后面连接 ...

  6. zookerper入门、核心概念和使用场景

    zookeeper是一个分布式程序的高性能协调服务,提供集中式信息存储服务,数据存储于内存中,类似文件系统的树形结构,高吞吐量和低延时,集群高可靠,基于zookeeper可以实现分布式统一配置中心.分 ...

  7. 在右键菜单中添加用Jupyter Notebook打开

    在右键菜单中添加用Jupyter Notebook打开 为了把 Jupyter 的工作目录指定到某一个文件夹下,每次都要启动 CMD 终端, 然后激活 Anaconda 环境,再启动 Jupyter ...

  8. 2.7_Database Interface OLE-DB诞生

    ODBC仅支持关系数据库,以及传统的数据库类型,并且只以C/C++语言API(API就是一些C语言的代码,是最底层的程序,在windows中就是一些.dll的文件)形式提供服务,因而无法符合日渐复杂的 ...

  9. 可分离滤波器设计高斯滤波 CUDA程序优化， 实验记录

    环境:RTX2060 ,1920X1080p ,循环10次, kernal_size=8 一 .测试前128个线程拷贝到dst数据的性能  ,只测试行卷积, block=(128+2r)X1 1. 使 ...

  10. day27-python之迭代器协议

    1.item系列方法 # class Foo: # def __getitem__(self, item): # print('getitem',item) # return self.__dict_ ...