效果图如下：

代码：

<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. dubbo中使用动态代理

    dubbo的动态代理也是只能代理接口 源码入口在JavassistProxyFactory中 public class JavassistProxyFactory extends AbstractPr ...

  2. [洛谷P3227][HNOI2013]切糕

    题目大意:有一个$n\times m$的切糕,每一个位置的高度可以在$[1,k]$之间,每个高度有一个代价,要求四联通的两个格子之间高度最多相差$D$,问可行的最小代价.$n,m,k,D\leqsla ...

  3. 使用二进制方式安装K8S时使用kubectl命令报错：The connection to the server localhost:8080 was refused - did you specify the right host or port?

    解决思路: kubectl 默认从 ~/.kube/config 配置文件获取访问 kube-apiserver 地址.证书.用户名等信息,如果没有配置该文件,或者该文件个别参数配置出错,执行命令时出 ...

  4. 关于base64的一个小细节

    Base64出现\r\n的问题 前段时间遇到这么一个小问题: 后台接口返回一个图片的base64串,同事拿着这个字符串,找了一个在线图片和Base64字符串互转的工具网站,想将字符串转成图片,死活转不 ...

  5. Excel默认去除开头的0

    用户反映打开的.xls文档打开时,excel会默认把某些以0开头零件号去零,导致数据丢失. 解决办法: 先用记事本打开,然后把EXCEL的单元格格式设为文本格式,再把数据复制过去就可以了. 或者先打开 ...

  6. 关闭 禁止 window10 UpdateOrchestrator UsoSvc服务

    背景故事:w10流氓更新关了! 然后重启还更新? 读者肯定关过win10自动跟新服务 如图: 然后 还有这个流氓设置 然而微软还有一招啊! 前有win10 update 后有计划任务 powershe ...

  7. Jsp页面显示时间:<fmt>标签问题

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%> <%@ taglib ...

  8. GIt三剑客

    一. Github 什么是Github? github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开. Github 由Chris Wan ...

  9. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  10. vue初级使用

    一.Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.采用自底向上增量开发的设计.Vue.js 的目标是通过尽可能简单的 API 实现响应 ...