效果图如下：

代码：

<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. 基础数字电路的Verilog写法

    Verilog是硬件描述电路,我对此一直稀里糊涂,于是将锆石科技开发板附带的的一些基础数字电路Verilog程序整理记录下来,并且查看他们的RTL视图,总算有点理解了. 1.基本运算符 module ...

  2. 一天一个Linux命令，第三天cat命令

    命令:cat (中文猫的意思) 解释:cat命令连接文件并打印到标准输出设备上(如显示器),cat经常用来显示文件的内容 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容. ...

  3. TextField 、 FTE、 TLF 的使用情景和简单说明

    作者:tiangej 来源:CSDN 原文:https://blog.csdn.net/tiangej/article/details/16859239 版权声明:本文为博主原创文章,转载请附上博文链 ...

  4. Failed to transfer file: http://repo.maven.apache.org/maven2/xpp3/xpp3_min/1.1.4c/xpp3_min-1.1.4c.jar

    解决办法:maven的配置文件settings.xml中添加mirror地址 <mirror>       <id>alimaven</id>       < ...

  5. 用pyinstaller打包一个exe程序

    打包单个exe文件 -F 选项可以打出一个exe文件,默认是 -D,意思是打成一个文件夹. pyinstaller -F TestDataGen.py 打出的桌面程序去掉命令行黑框 -w 选项可以打桌 ...

  6. Jupyter Notebook的配置(密码端口+远程登陆+nbextension)

    1 生成配置文件 linux和mac系统打开终端 windows系统打开anaconda自带的终端 jupyter notebook --generate-config 此时系统会生成 ~/.jupy ...

  7. (二) Windows 进行 Docker CE 安装(Docker Desktop)

    参考并感谢 官方文档: https://docs.docker.com/docker-for-windows/install/ 下载地址 https://download.docker.com/win ...

  8. 使用jQuery开发datatable分页表格插件

    当系统数据量很大时,前端的分页.异步获取方式就成了较好的解决方案.一直以来,我都希望使用自己开发的 jquery 插件做系统. 现在,学习了 jquery 插件开发之后,渐渐地也自己去尝试着开发一些简 ...

  9. 四 python中关于OOP的常用术语

    抽象/实现 抽象指对现实世界问题和实体的本质表现,行为和特征建模,建立一个相关的子集,可以用于 绘程序结构,从而实现这种模型.抽象不仅包括这种模型的数据属性,还定义了这些数据的接口. 对某种抽象的实现 ...

  10. 从MVC -> MVVM ? 开发模式

    MVVM 到底是什么? view :由 MVC 中的 view 和 controller 组成,负责 UI 的展示,绑定 viewModel 中的属性,触发 viewModel 中的命令: viewM ...