效果：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. JAVA设计模式之模板模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  2. BZOJ 1103: [POI2007]大都市meg [DFS序 树状数组]

    1103: [POI2007]大都市meg Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2221  Solved: 1179[Submit][Sta ...

  3. linux-centos6.5之ssh配置

    查询\安装SSH服务 #rpm -qa |grep ssh 检查是否装了SSH包 #yum install openssh-server 没有的话,安装SSH服务 #chkconfig --list ...

  4. html5 audio总结

    前言 html5中对音频,视频播放原生支持.最近做了一个音乐播放器,得益于快过年了,才能抽出一点时间来总结一下.总的来说,html5对audio的支持非常强大, 难怪flash要死.浏览器上装播放插件 ...

  5. WPF - 属性系统 - APaas（AttachedProperty as a service）

    是的,文章的题目看起来很牛,我承认. 附加属性是WPF中的一个非常重要的功能.例如在设置布局的过程中,软件开发人员就常常通过DockPanel的Dock附加属性来设置其各个子元素所处的布局位置.同样地 ...

  6. Redis集群案例与场景分析

    1.背景 Redis的出现确实大大地提高系统大并发能力支撑的可能性,转眼间Redis的最新版本已经是3.X版本了,但我们的系统依然继续跑着2.8,并很好地支撑着我们当前每天5亿访问量的应用系统.想当年 ...

  7. 我对BFC的理解

    最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...

  8. 小谈Scrum敏捷开发流程

    一晃眼,有两年没有写博客了,回顾前两年,各种奔波,各种忙碌,也有不少的收获.从今天开始,我要把这些收获都分享在这里. 其实这两年,对我影响最大的是开发流程.总所周知,一个好的开发流程,对于项目的进行, ...

  9. Top Coder算法题目浏览器

    作者:Lucida 微博:@peng_gong 豆瓣:@figure9 原文链接:http://zh.lucida.me/blog/top-code-offline-browser/ 关于 左耳朵耗子 ...

  10. 如何用Dockerfile创建镜像

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