今天是感恩节，祝大家感恩节快乐哦！最近天冷了，大家注意保暖哟。下面一起看看小颖写的demo吧。

html代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>图片缩放</title>

    <link rel="stylesheet" href="css/master.css" media="screen">

</head>

<body>

    <div class="image-body">

        <div class="row-first">

            <div class="img-first">

                <img src="data:images/one.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

            <div class="img-second">

                <img src="data:images/two.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

            <div class="img-third">

                <img src="data:images/three.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

        </div>

        <div class="row-second">

            <div class="img-first">

                <img src="data:images/four.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

            <div class="img-second">

                <img src="data:images/five.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

            <div class="img-third">

                <img src="data:images/six.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

        </div>

        <div class="row-third">

            <div class="img-first">

                <img src="data:images/seven.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

            <div class="img-second">

                <img src="data:images/eight.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

            <div class="img-third">

                <img src="data:images/nine.jpg" alt="狗狗" />

                <div class="txt">

                    我是小可爱

                </div>

            </div>

        </div>

    </div>

</body>

</html>

css代码：

.image-body {

    padding-left: 157px;

}

.row-first, .row-second, .row-third {

    overflow: hidden;

}

.img-first, .img-second, .img-third {

    float: left;

    height: 227px;

    width: 260px;

}

.image-body img {

    width: 200px;

    height: 180px;

    z-index: -1; /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/

}

.image-body .txt {

    width: 175px;

    height: 40px;

    position: relative;

    background: url(../images/bg_index_tag.png);

    left: 20%;

    top: -80px;

    display: none;

    z-index:;

    cursor: default; /*cursor 属性规定要显示的光标的类型（形状）。*/

    padding: 10px 0px 0px 15px;

}

.img-first:hover .txt, .img-second:hover .txt, .img-third:hover .txt {

    display: block;

}

.img-first:hover img, .img-second:hover img, .img-third:hover img {

    transform: scale(1.5);

    /*scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 */

}

CSS实现图片缩放特效的更多相关文章

  1. 仅用CSS实现图片渲染特效 (有学习到了）

    前言 实现图片高亮效果等特效,就不得不提到CSS3的滤镜filter属性,CSS过滤器是一个强大的工具,可以使用它来实现不同的视觉效果(有点像浏览器的Photoshop过滤器).CSS filter属 ...

  2. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  3. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

  4. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  5. HTML5 图片缩放功能

    腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, sup ...

  6. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  7. PHP 简易读取文件目录下的文件，生成css spirte图片

    因为个人不是对PS熟悉,不清楚如何在PS中生成一张横向有序的spirte图片,使用了"css sprite V4.3"版本,生成的图片会出现压缩图片大小的情况,本想修改原作者开发的 ...

  8. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  9. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. PHP搭建大文件切割分块上传功能

    背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示"该文件过大".因为一般情况下,我们都需要对上传的文件大小做限制,防止出现 ...

  2. ASP.NET MVC5+EF6+EasyUI 后台管理系统（74）-微信公众平台开发-自定义菜单

    系列目录 引言 1.如果不借用Senparc.Weixin SDK自定义菜单,编码起来,工作量是非常之大 2.但是借助SDK似乎一切都是简单得不要不要的 3.自定义菜单无需要建立数据库表 4.自定义菜 ...

  3. .Net 大型分布式基础服务架构横向演变概述

    一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...

  4. 阿里云学生优惠Windows Server 2012 R2安装IIS，ftp等组件，绑定服务器域名，域名解析到服务器，域名备案，以及安装期间错误的解决方案

     前言: 这几天终于还是按耐不住买了一个月阿里云的学生优惠.只要是学生,在学信网上注册过,并且支付宝实名认证,就可以用9块9的价格买阿里云的云服务ECS.确实是相当的优惠. 我买的是Windows S ...

  5. 【夯实PHP基础】UML序列图总结

    原文地址 序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色 ...

  6. 最新的 cocoaPods 安装方法

    经过努力终于发现了最新的 解决cocoaPods安装的办法: taobao Gems 源已停止维护,现由 ruby-china 提供镜像服务 第一步:安装rvm, 不管需不需要升级ruby,rvm可以 ...

  7. Android程序中--不能改变的事情

    有时,开发人员会对应用程序进行更改,当安装为以前版本的更新时出现令人惊讶的结果 - 快捷方式断开,小部件消失或甚至根本无法安装. 应用程序的某些部分在发布后是不可变的,您可以通过理解它们来避免意外. ...

  8. SEED实验系列文章目录

    美国雪城大学SEEDLabs实验列表 SEEDLabs是一套完整的信息安全实验,涵盖本科信息安全教学中的大部分基本原理.项目组2002年由杜文亮教授创建,目前开发了30个实验,几百所大学已采用.实验楼 ...

  9. SEO：权重如何做到从0到1

    SEO:权重如何做到从0到1 [写于2016年9月]我真的好久好久没到我的博客上去看过了,今天突然登上 seo.chinaz.com,搜索 dkplus.iteye.com,发现自己的博客在百度收录中 ...

  10. [PHP源码阅读]array_slice和array_splice函数

    array_slice和array_splice函数是用在取出数组的一段切片,array_splice还有用新的切片替换原删除切片位置的功能.类似javascript中的Array.prototype ...