效果：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. Linux 权限设置chmod

    Linux中设置权限,一般用chmod命令 1.介绍 权限设置chmod 功能:改变权限命令.常用参数: 1＝x(执行权execute) 2＝w(写权write) 4＝r(读权Read) setuid ...

  2. lucene 基础知识点

    部分知识点的梳理,参考<lucene实战>及网络资料 1.基本概念 lucence 可以认为分为两大组件: 1)索引组件 a.内容获取:即将原始的内容材料,可以是数据库.网站(爬虫).文本 ...

  3. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  4. ASP.NET MVC Model绑定(五)

    ASP.NET MVC Model绑定(五) 前言 前面的篇幅对于IValueProvider的获取位置和所处的生成过程做了讲解,本篇将会对IValueProvider的使用做个基础的示例讲解,读完本 ...

  5. Azure Queue Storage 基本用法 -- Azure Storage 之 Queue

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在<Azure File Storage 基 ...

  6. C# 根据类型名称 生成实体 调用方法

    System.Reflection.Assembly ass = System.Reflection.Assembly.Load("项目名称或者DLL"); //System.Th ...

  7. Quartz.net开源作业调度框架使用详解

    前言 quartz.net作业调度框架是伟大组织OpenSymphony开发的quartz scheduler项目的.net延伸移植版本.支持 cron-like表达式,集群,数据库.功能性能强大更不 ...

  8. c#如何判断webbrowser已经加载完毕

    最近有个小程序需要采集网页源代码,但有的网页中JS脚本又会生成额外的代码,比如http://www.cnblogs.com/lidabo/p/4169396.html 红框部分便是另外加载的代码. 此 ...

  9. 外边距塌陷之clearance

    在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overf ...

  10. 深入理解脚本化CSS系列第二篇——查询计算样式

    × 目录 [1]getComputedStyle [2]注意事项 [3]currentStyle[4]IE 前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade ...