效果图如下：

代码：

<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. SAS学习笔记57 template的管理

    template查询 首先点击SAS Windows左上方查询框,输入“odst”或者“odstemplates”,如下所示: 然后点击enter键,进入查询的template文件夹,如下所示: 这里 ...

  2. typescript之基础类型

    基础类型分为:数字.字符串.数组.元组.枚举.Any.Object.Null.Undefined.Never.Void 各种类型写法如下: 1.数字(number) let num:number = ...

  3. [LOJ2292] [THUSC2016] 成绩单

    题目链接 LOJ:https://loj.ac/problem/2292 洛谷:https://www.luogu.org/problemnew/show/P5336 Solution 区间\(\rm ...

  4. java 正则和连接json

    前面已经写了不少关于C# 怎么使用正则,有兴趣,可以翻译成java代码. 以图片为例子: import java.util.regex.Matcher; import java.util.regex. ...

  5. C#学习笔记------参数

    一.形参 形参是本地变量,它声明在方法的参数列表中,而不是方法体中.

  6. 转 如何在调用WCF服务之前弹出一个确认对话框

    自定义InteractiveChannelInitializer(InvocationConfirmationInteractiveChannelInitializer)定义如下.我们在BeginDi ...

  7. 易百教程人工智能python修正-人工智能数据准备-标记数据

    我们已经知道,某种格式的数据对于机器学习算法是必需的. 另一个重要的要求是,在将数据作为机器学习算法的输入发送之前,必须正确标记数据. 例如,如果所说的分类,那么数据上会有很多标记. 这些标记以文字, ...

  8. 【洛谷 SP8093】 JZPGYZ - Sevenk Love Oimaster（后缀自动机）

    题目链接 广义sam.. #include <cstdio> #include <cstring> #include <algorithm> using names ...

  9. js原型，原型链

    先铺垫下原型规则: 1.所有的引用类型(数组,对象,函数)都具有对象特性,可自由扩展属性(出了null外) 2.所有的引用类型(数组,对象,函数)都有一个__proto__属性(隐式原型),属性值是一 ...

  10. JAVA - Windows下JDK默认安装的配置参数

    JDK版本1.8 JAVA_HOME C:\Program Files\Java\jdk1.8.0_60 CLASSPATH .;%%JAVA_HOME%%\lib;%%JAVA_HOME%%\lib ...