效果图如下：

代码：

<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(window,document,undefined){})(window,document);

    使用匿名自执行函数的作用: (function(window,document,undefined){})(window,document); 1.首先匿名函数 (function(){}) (); ...

  2. vs2019中调用本地数据库mdf的相关问题

    程序中要用到数据库文件mdf,这个不像sql文件一样能直接用txt打开,所以很麻烦 所以mysql要比sqlserver好用,哎 要使用本地的mdf文件数据库,首先要将web.config中的网络连接 ...

  3. PowerBuilder中pbm_keydown()和pbm_dwnkey()的区别：

    原地址:https://vcoo.cc/blog/463/ PowerBuilder开发中我们经常会用到快捷键的事件编程,在PB中的键盘事件主要用三个:pbm_dwnkey.pbm_keydown.p ...

  4. 【题解】Luogu P5398 [Ynoi2018]GOSICK

    原题传送门 二次离线莫队 二次离线莫队的做法参考第十四分块(前体)的题解 我们需要考虑从(1,i)如何推到(1,i+1) 我们算过了a[i]的答案,考虑加入a[i]的贡献 我们需要在a[i]的所有约数 ...

  5. golang --iota 用法

    package main import "fmt" func main() { const ( a = iota //0 b //1 c //2 d = "ha" ...

  6. 最简单 无返回值 无参数 sql server存储过程

    CREATE proc Upadte_stateas update Table_1 set [state]=2 where id in (select id from Table_1 where st ...

  7. 让table中的td不会被过长的文字撑开,并且自动出现省略号

    <style type="text/css"> table {width:600px;table-layout:fixed;} td {white-space:nowr ...

  8. Django:web认识，jinja2模块，如何安装Django

    一内容概要 1.HTTP协议 1.1简介 ​ 超文本传输协议(英文:Hyper Text Transfer Protocol,HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是 ...

  9. 安装License需要重启

    "only commands for license handling are allowed in current state" Can you confirm if licen ...

  10. MySQL Lock--gap before rec insert intention waiting

    在事务插入数据过程中,为防止其他事务向索引上该位置插入数据,会在插入之前先申请插入意向范围锁,而如果申请插入意向范围锁被阻塞,则事务处于gap before rec insert intention ...