效果图如下：

代码：

<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. javascript 代码实例

    数组去重 function unique(arr){ if(!Array.isArray(arr)){ console.log('type error!'); return; } arr = arr. ...

  2. java.lang.IllegalArgumentException: Expected authority at index 7: http:// 异常的原因

    今天遇到个错误,异常信息  java.lang.IllegalArgumentException: Expected authority at index 7: http://  ,中文意思就是说参数 ...

  3. Mybatis @Result注解的使用案例

    @Result注解的使用

  4. [清晰] kubernets权威指南第2版

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  5. PreparedStatement和批处理

    1.概述 PreparedStatement 接口继承了 Statement,并与之在两方面有所不同,它表示预编译的 SQL 语句对象. 首先,数据库会对预编译语句提供性能优化.因为预编译语句有可能被 ...

  6. HTML5 结构标签

    一.定义标题栏:header header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,因此整个页面的标题应该放在页面的开头. he ...

  7. arm9的中断

    GPIO 习惯了stm32的GPIO,发现高端处理器arm在这方面反而简单了. ARM9控制GPIO只有三种寄存器. GPxCON:配置引脚功能,GPACON用一位控制一个GPIO,分别是0为输出引脚 ...

  8. 删除Ubuntu的UEFI启动项

    bcdedit 删除 千万不要手贱用diskpart之类的命令直接删除文件夹,大写的没,有,用! 感谢这个视频的up主,youtube看不到请翻墙.https://www.youtube.com/wa ...

  9. 【hbase】hbase的shell操作笔记

    HBase Shell $ ./bin/hbase shell # 进入交互界面 DDL操作: create:创建表(默认命名空间为default) # create '表名','列族1','列族2' ...

  10. ssh无密码连接

    1. 生成密钥对文件 [root@centos2 ~]# -t 指定加密类型 -b 指定密钥对加密长度 询问1:执行过程中会询问保存位置,一般默认保存在当前用户家目录下的.ssh/目录下 询问2:是否 ...