效果：http://hovertree.com/texiao/css3/20/

效果图：

代码如下：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS3鼠标悬停图片上浮显示描述特效 - 何问起</title><base target="_blank" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/20/css/normalize.css" />

<link rel="stylesheet" href="http://hovertree.com/texiao/css3/20/css/style.css">

<style>

.hovertree-container{border:0px solid red;}

.container{background-color:white}

.hovertreeinfo{text-align:center;}

a{color:blue;}

</style>

</head>

<body>

<div class="hovertreeinfo"><h1>CSS3鼠标悬停图片上浮显示描述</h1>

</div>

<div class="hovertree-container">

<div class="container">

<div class="gallery">

<div class="gallery-item">

<a href="http://hovertree.com">

<div class="gallery-item-image">

<img src="http://hovertree.com/texiao/css3/20/img/1.jpg">

</div>

<div class="gallery-item-description">

<h3>何问起</h3><span>嗨，我是1号，我叫何问起，我萌吧，欢迎点我.</span>

</div>

</a>

</div>

<div class="gallery-item">

<a href="http://hovertree.com/code/css/7jesuwjk.htm">

<div class="gallery-item-image">

<img src="http://hovertree.com/texiao/css3/20/img/2.jpg">

</div>

<div class="gallery-item-description">

<h3>柯乐义</h3><span>我是二号柯乐义，欢迎点我，我唱歌很好听的，带上耳机吧，我有绝活。。。</span>

</div>

</a>

</div>

<div class="gallery-item">

<a href="http://hovertree.com/code/css/s8o19792.htm">

<div class="gallery-item-image">

<img src="http://hovertree.com/texiao/css3/20/img/3.jpg">

</div>

<div class="gallery-item-description">

<h3>冷冰冰</h3><span>我的外表冷冰冰，但是我很活泼的，进来看看就知道了。</span>

</div>

</a>

</div>

<div class="gallery-item">

<a href="http://hovertree.com/hvtart/bjae/m8wrrmrw.htm">

<div class="gallery-item-image">

<img src="http://hovertree.com/texiao/css3/20/img/4.jpg">

</div>

<div class="gallery-item-description">

<h3>Image title</h3><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, quia.</span>

</div></a>

</div>

<div class="gallery-item">

<a href="http://hovertree.com/h/bjaf/html5zixueji.htm">

<div class="gallery-item-image">

<img src="http://hovertree.com/texiao/css3/20/img/5.jpg">

</div>

<div class="gallery-item-description">

<h3>美女</h3><span>别问我是谁，相逢何必曾相识，只需记住我曾经给你带去的欢乐...</span>

</div></a>

</div>

<div class="gallery-item">

<a href="http://hovertree.com/h/bjaf/kqud99m6.htm">

<div class="gallery-item-image">

<img src="http://hovertree.com/texiao/css3/20/img/6.jpg">

</div>

<div class="gallery-item-description">

<h3>HT主播</h3><span>我是网红HT紫，如果你有绝活，欢迎加入我的团队。。。</span>

</div></a>

</div>

</div>

</div>

</div>

<div style="text-align:center;margin:0px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjaf/tupianmiaoshu.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a>

</p>

</div>

</body>

</html>

转自:http://hovertree.com/h/bjaf/tupianmiaoshu.htm

推荐：http://hovertree.com/hvtart/bjae/51kt42r0.htm

更多特效：http://www.cnblogs.com/jihua/p/webfront.html

CSS3鼠标悬停图片上浮显示描述代码的更多相关文章

  1. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  2. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  3. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  4. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  5. css3鼠标悬停图片边框线条动画特效

    css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class ...

  6. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

  7. css3鼠标悬停图片渐显飞入效果

    body程序: <div id="bei"> <div id="img"><img src="xianzi.png&qu ...

  8. css3 鼠标悬停图片动画

    <div class="grid"> <figure class="effect-milo"> <img src="im ...

  9. css3鼠标悬停图片抖动效果

    提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/

随机推荐

  1. RunLoop 总结：RunLoop的应用场景（一）

    参考资料 好的书籍都是值得反复看的,那好的文章,好的资料也值得我们反复看.我们在不同的阶段来相同的文章或资料或书籍都能有不同的收获,那它就是好文章,好书籍,好资料.关于iOS 中的RunLoop资料非 ...

  2. Linux根文件系统分析之init和busybox

    Hi,大家好!我是CrazyCatJack.今天给大家讲解Linux根文件系统的init进程和busybox的配置及编译. 先简单介绍一下,作为一个嵌入式系统,要想在硬件上正常使用的话.它的软件组成大 ...

  3. 机器指令翻译成 JavaScript —— No.4 动态跳转

    上一篇,我们用模拟流程的方式,解决了跳转问题. 不过静态跳转,好歹事先是知道来龙去脉的.而动态跳转,只有运行时才知道要去哪.既然流程都是未知的,翻译从何谈起? 动态跳转,平时出现的多吗?非常多!除了 ...

  4. Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  5. JqueryQrcode生成二维码不支持中文的解决办法

    JqueryQrcode.js有一个小小的缺点,就是默认不支持中文. 这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的, 而这个方法默认会 ...

  6. 2000条你应知的WPF小姿势 基础篇<15-21>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  7. 如何用Dockerfile创建镜像

    本文原创,原文地址为:http://www.cnblogs.com/fengzheng/p/5181222.html 创建镜像的目的 首先说DockerHub或其它一些镜像仓库已经提供了够多的镜像,有 ...

  8. ABP框架 - 多租户

    文档目录 本节内容: 什么是多租户 多部署 - 多数据库 单部署 - 多数据库 单部署 - 单数据库 单部署 - 混数据库 多部署 - 单/多/混 数据库 ABP中的多租户 启用多租户 宿主与租户 会 ...

  9. 字符串转化为Json格式的数据--(记录四)

    var pName = $(".productName").html(); var pPrice = $(".productPrice").html(); // ...

  10. 开源组件ExcelReport 1.5.2 使用手册

    ExcelReport是一款基于NPOI开发的报表引擎组件.它基于关注点分离的理念,将数据与样式.格式分离.让模板承载样式.格式等NPOI不怎么擅长且实现繁琐的信息,结合NPOI对数据的处理的优点将E ...