思路分析

(1)、搭建界面

(2)、鼠标移到图片的时候，放大显示

(3)、鼠标移入到当前的li标签里面找到后面的div让其显示出来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body,div,span{margin:0;padding:0;}

        ul{width:560px;height:180px;margin:50px auto;}

        li{list-style:none;width:180px;height:180px;border:1px solid #666;float:left;

            margin-left:2px;position:relative;overflow:hidden;}

        li img{width:100%; transition:all 1s;}

        h2{font-size:16px;}

        p{font-size:13px; line-height:20px;}

        li div{ position:absolute;left:-180px;

            top:0px;background:#666;color:#fff;border:1px solid #fff;height:180px;width:180px;

            opacity:0; transition:all 1s ease 1s;}

        img:hover{

            transform:scale(2);

        }

        li:hover div{

            opacity:1;

            transform:translateX(180px);

        }

    </style>

</head>

<body>

<ul>

    <li><img src="img/meinv.jpg" alt="">

        <div>

            <h2>广东惠州一小学校长涉嫌威胁小学生</h2>

            <p>在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为”data-url”，此属性值</p>

        </div>

    </li>

    <li><img src="img/meinv.jpg" alt="">

        <div>

            <h2>广东惠州一小学校长涉嫌威胁小学生</h2>

            <p>在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为”data-url”，此属性值</p>

        </div>

    </li>

    <li><img src="img/meinv.jpg" alt="">

        <div>

            <h2>广东惠州一小学校长涉嫌威胁小学生</h2>

            <p>在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为”data-url”，此属性值</p>

        </div>

    </li>

</ul>

</body>

</html>

　　

用CSS3写的小案例-图片缩放隐藏内容显示的更多相关文章

  1. HTML 中图片的隐藏与显示

    <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Co ...

  2. JavaScript_DOM学习篇_图片切换小案例

    今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.g ...

  3. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  4. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  5. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  6. Android小案例——简单图片浏览器

    今天上午休息看Android书,里面有个变化图片的示例引起了我的兴趣. 示例需求: 有N张图片,循环显示图片的内容.如果需求让我写我会使用一个变量count来保存显示图片数据的索引,图片显示时做个判断 ...

  7. 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

    1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...

  8. Servlet----------用servlet写一个“网站访问量统计“的小案例

    package cn.example; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.Ser ...

  9. 《图解CSS3：核心技术与案例实战》

    <图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...

随机推荐

  1. Getting Started with Zend Framework MVC Applications

    Getting Started with Zend Framework MVC Applications This tutorial is intended to give an introducti ...

  2. win7 debian 双系统修改引导项顺序

    转载:http://jingyan.baidu.com/article/72ee561aa1d123e16138df81.html 问题描述: 个人在宿舍使用的比较多的是Window 7,而它的启动项 ...

  3. Integer的缓存和自动拆装箱

    先看一个简单的例子: public class TestInteger { public static void main(String[] args) { System.out.println(&q ...

  4. Android进阶笔记16：ListView篇之ListView刷新显示（全局 和 局部）

    一.ListView内容变化后,动态刷新的步骤(全局刷新): (1)更新适配器Adapter数据源:(不要使用匿名内部类) (2)调用适配器Adapter的刷新方法notifyDataSetChang ...

  5. Java设计模式14：常用设计模式之组合模式（结构型模式）

    http://blog.csdn.net/jason0539/article/details/22642281

  6. Java设计模式12：常用设计模式之外观模式（结构型模式）

    1. Java之外观模式(Facade Pattern) (1)概述:       现代的软件系统都是比较复杂的,设计师处理复杂系统的一个常见方法便是将其"分而治之",把一个系统划 ...

  7. css笔记01：CSS例子

    body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font ...

  8. [转]不用安装Oracle Client如何使用PLSQL Developer

    本文转自:http://www.cnblogs.com/sleepywang/archive/2009/10/13/1582654.html 1. 下载oracle的客户端程序包(30M) 只需要在O ...

  9. vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th

    本次示例效果如下: TextBox1中输入如下字符串: 12<table><tbody><tr><td>1<br/>11</td> ...

  10. CSS3 媒体记

    css3 媒体 Media Type 媒体类型 媒体类型是CSS2中一个非常有用的属性.通过媒体类型可以对不同的设备指定不同的样式. W3C共列出十种媒体类型,如表: 值 设备类型 all 所有设备 ...