效果图如下：

代码：

<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. redis连接相关命令

    命令名称:echo 语法:echo message 功能: 打印一个特定的信息message,测试时使用. 返回值: message自身 命令名称:ping 语法:ping 功能: 使用客户端向red ...

  2. 记录Quarter的基本使用

    原文:记录Quarter的基本使用 using Quartz; using Quartz.Impl; using Quartz.Impl.Matchers; using Quartz.Logging; ...

  3. power shell导出文件夹目录递归

    --获取目录:Get-ChildItem --递归目录:-Recurse --选择想要导出的目录参数,如:文件名,时间,权限等:Select-Object Name, LastWriteTime, M ...

  4. Coldfusion Sql查询分组输出

    <cfoutput query="myQry" group="date"> #date# <cfoutput> #detail# < ...

  5. Node笔记（新手入门必看）

    . 初识Node.js 1.1 Node.js是什么 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. ...

  6. vue-resource 中 get / post / jsonp 三种请求方式的异同

    let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2';let params ...

  7. day53-python之会话

    from django.shortcuts import render,redirect # Create your views here. import datetime def login(req ...

  8. iOS加解密最重要的干货：CCCrypt

    需要引入框架#import <CommonCrypto/CommonCryptor.h> 函数定义: CCCryptorStatus CCCrypt( CCOperation op, /* ...

  9. Redis 学习-持久化与主从复制

    一.持久化 1. RDB rdb 是 redis 内存到硬盘的快照,用于持久化 ①. 通过执行命令,主动保存快照 save # 执行保存快照,执行时 redis 会处理阻塞状态直至执行完成. bgsa ...

  10. unity 3D物体使用EventSystem响应事件

    在ugui中创建一个canvas 之后会自动创建一个EventSystem,用来处理UI上的时间响应.(可以通过UI>EventSystem创建EventSystem) EventSystem ...