<p>【鼠标移动进去图片放大一倍效果：运用了-webkit-transform:scale(1.04)效果】</p>

如图：鼠标移动上去的时候图片放大一倍的效果，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

html{color:#333;background:#f3f3f3;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}

li{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

q:before,q:after{content:'';}

abbr,acronym{border:0;font-variant:normal;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

input,textarea,select,strong{font-family:inherit;font-size:inherit;}

input,textarea,select{*font-size:100%;}

legend{color:#333;}

.clear{height:0;font-size:0;line-height:0;clear:both; display:block;}

body{font-size:12px;background-color:#f3f3f3;font-family:tahoma,verdana,arial,helvetica,sans-serif;text-align:center;color:#333; line-height:20px;}

a{color:#816353;text-decoration:none;}

a:hover{color:#c01313;}

.clearfix{zoom:1;}.clearfix:after{content:'\0020';display:block;height:0;clear:both;}

.container{ width:980px; margin:15px auto; overflow:hidden; text-align:left;}

.modul{ width:1000px;}

.mod_title{ font-size:22px; font-family:"Microsoft YaHei"; height:24px; line-height:24px; font-weight:bold; color:#3d3d3d; display:block; margin-bottom:15px;}

.modul li{ float:left; width:313px; margin-right:20px;}

.mod_show{ display:block; width:100%; background:#fff; overflow:hidden; zoom:1; margin-bottom:20px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1); position:relative;}

.mod_img{ cursor:pointer; max-width:100%; overflow:hidden; position:relative; height:190px;}

.mod_img a img{ vertical-align:top;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; max-width:100%;}

.mod_img a:hover img{-webkit-transform:scale(1.04);-moz-transform:scale(1.04);transform:scale(1.04);}

.mod_detail{ padding:10px; background:#fff; font-size:12px;}

.mod_detail:after{ content:''; display:block; clear:both;}

.mod_detail .mod_avatar{ margin-top:26px; background-color:#fff; border:1px solid #e3e3e5; padding:5px; float:right;}

.mod_detail .mod_avatar img{ width:50px; height:50px; vertical-align:top;}

.mod_detail .mod_tit{ font-size:16px; font-weight:400; height:18px; line-height:18px; color:#3d3d3d; padding-bottom:7px; overflow:hidden; font-family:"Microsoft YaHei";}

.mod_detail .mod_info{ color:#9f9f9f; margin-bottom:8px; line-height:16px; height:32px; overflow:hidden;}

.mod_detail .mod_dete .ui_light{ color:#9f9f9f;}

</style>

</head>

<body>

<div class="container">

     <h3 class="mod_title">旅游设计师</h3>

     <ul class="modul clearfix">

         <li>

             <div class="mod_show">

                  <p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p>

                  <div class="mod_detail">

                       <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>

                       <div class="mod_conten">

                            <h3 class="mod_tit">站在历史和地理的正确一方</h3>

                            <div class="mod_info">爱李白爱司马迁。闲时写瘦金体，弹琵琶曲，还能卜梅花易。背过八大菜系的40本菜谱，去过中国的每个省，为吃去旅行的金牛女。上班干QQ旅游，总也干不好，老被老板骂</div>

                            <div class="mod_dete">设计师：<span class="ui_light">梁宁</span></div>

                       </div>

                  </div>

             </div>

         </li>

         <li>

             <div class="mod_show">

                  <p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p>

                  <div class="mod_detail">

                       <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>

                       <div class="mod_conten">

                            <h3 class="mod_tit">站在历史和地理的正确一方</h3>

                            <div class="mod_info">爱李白爱司马迁。闲时写瘦金体，弹琵琶曲，还能卜梅花易。背过八大菜系的40本菜谱，去过中国的每个省，为吃去旅行的金牛女。上班干QQ旅游，总也干不好，老被老板骂</div>

                            <div class="mod_dete">设计师：<span class="ui_light">梁宁</span></div>

                       </div>

                  </div>

             </div>

         </li>

         <li>

             <div class="mod_show">

                  <p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p>

                  <div class="mod_detail">

                       <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>

                       <div class="mod_conten">

                            <h3 class="mod_tit">站在历史和地理的正确一方</h3>

                            <div class="mod_info">爱李白爱司马迁。闲时写瘦金体，弹琵琶曲，还能卜梅花易。背过八大菜系的40本菜谱，去过中国的每个省，为吃去旅行的金牛女。上班干QQ旅游，总也干不好，老被老板骂</div>

                            <div class="mod_dete">设计师：<span class="ui_light">梁宁</span></div>

                       </div>

                  </div>

             </div>

         </li>

     </ul>

</div>

</body>

</html>

-webkit-transform:scale(1.04)放大缩小效果的更多相关文章

  1. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

  2. css scale 元素放大缩小效果

    <style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...

  3. 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  4. 纯CSS实现内容放大缩小效果

    先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...

  5. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  7. css----动画（图片无限放大缩小）

    先给大家推荐animate.css库,里面有一些效果很不错的过度样式,不想自己写的也可以直接安装这个库来使用,如果不想安装这个库也可以去https://daneden.github.io/animat ...

  8. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  9. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

随机推荐

  1. windows自带的压缩，解压缩命令

    压缩一个文件: makecab c:\ls.exe ls.zip 解压一个文件: expand c:\ls.zip c:\ls.exe

  2. maven pom文件结构详解

    POM文件结构 Project Object Model是Maven2项目的基础所在,简单来说它就是一个XML文件,Maven2用它来描述一个工程的整个生命周期所需要执行的一系列功能和特性. 最小配置 ...

  3. js 查找关键字

    查找:4种: 1. 查找固定关键字,仅返回位置,可指定开始位置: var i=str.indexOf("kword"[,starti]); str.lastIndexOf(&quo ...

  4. PHPExcel创建文件格式写入对象实例

    首先到http://www.codeplex.com/PHPExcel下载PHPExcel 下面就是php导出excel的程序 <?phpini_set("display_errors ...

  5. centos桌面使用

    firefox添加flash插件 [root@bogon home]# cp libflashplayer.so /usr/lib64/mozilla/pl pl plugins/ plugins-w ...

  6. 便捷从使用git开始

    每次浏览网站上传代码,实在过于不便,为此我们引入git来管理我们的代码. 查看帮助手册是了解其的最佳路径,coding.net也不例外.通过浏览https://coding.net/help/,你会发 ...

  7. 带连接池的netty客户端核心功能实现剖解

    带连接池的netty客户端核心功能实现剖析 带连接池的netty的客户端核心功能实现剖析 本文为原创,转载请注明出处 源码地址: https://github.com/zhangxianwu/ligh ...

  8. Thread Safe(线程安全)和None Thread Safe(NTS，非线程安全)之分

    Windows版的PHP从版本5.2.1开始有Thread Safe(线程安全)和None Thread Safe(NTS,非线程安全)之分,这两者不同在于何处?到底应该用哪种?这里做一个简单的介绍. ...

  9. Simple JavaScript Inheritance--一个极简JS面向对象-类库

    面向对象 面向对象思想的几个重要特征(针对类的要求): 抽象-封装.信息隐藏(将内部实现的方法和数据隐藏, 定义开放的接口) 继承-子类可以使用父类的资源,并可以定制自己的资源, 资源包括方法和数据 ...

  10. Groovy学习笔记（一）

    1.1 安装Groovy Groovy主页:http://www.groovy-lang.org 确保本地系统安装了Java 1.1.1 在Windows系统上安装Groovy 1.创建环境变量GRO ...