效果图如下：

代码：

<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. tidb测试环境搭建

    tidb ansible 部署方式环境检查过于严格,测试环境往往达不到标准,需调整一些参数才能部署成功. 基于tidb2.0版本需要调整的参数 [tidb@ansible01 tidb-ansible ...

  2. 「CTS2019」氪金手游

    「CTS2019」氪金手游 解题思路 考场上想出了外向树的做法,居然没意识到反向边可以容斥,其实外向树会做的话这个题差不多就做完了. 令 \(dp[u][i]\) 表示单独考虑 \(u\) 节点所在子 ...

  3. win7远程服务器发生身份验证错误，要求的函数不受支持

    远程服务器发生身份验证错误,要求的函数不受支持,远程登录服务器以前都是正常的,今天登录远程桌面就一直是这样的错误.记录一下解决方法. 方法一:卸载补丁KB41037181.打开控制面板,找到“程序和功 ...

  4. Dubbo学习摘录（零）

    节点角色说明: Provider:暴露服务的服务提供方: Consumer:调用远程服务的服务消费方: Registry:服务注册与发现的注册中心: Monitor: 统计服务的调用次数和调用时间: ...

  5. MOOC web前端开发笔记（二）

    HTML HTML概述 HTML(HyperText MarkUp Language) "超文本标记语言",以标签的形式规定网页结构,它是制作网页的标准语言 HTML不区分大小写 ...

  6. JDK提供的原子类和AbstractQueuedSynchronizer（AQS）

    大致分成: 1.原子更新基本类型 2.原子更新数组 3.原子更新抽象类型 4.原子更新字段 import java.util.concurrent.atomic.AtomicInteger; impo ...

  7. java之hibernate之crud

    这篇文章主要讲解: 1>.对Hibernate使用的一些简单封装: · 2>.在单元测试中,使用Hibernate的封装的工具进行增删改查的测试 1.目录结构展示 2.代码展示 2.0 配 ...

  8. C#_WPF中创建二维码、识别二维码

    第三方库: WPFMediaKit.dll (WPFMediaKit摄像头处理) zing.dll NuGet安装这两个第三方dll 项目截图预览: 项目代码: using System; using ...

  9. iOS - 第三方库总结篇

    Swift版本点击这里 欢迎加入QQ群交流: 594119878 About A curated list of iOS objective-C ecosystem. How to Use Simpl ...

  10. Solr-rce历史漏洞复现

    最近Solr又出了一个RCE漏洞,复现了一下 # coding: utf-8 import requestsimport argparsefrom urllib import parse if __n ...