效果：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. Android 中的mvvm

    我们来了解一下MVVM模式与Databinding ,MVVM是一种模式,Databinding 是一种框架.DataBinding是一个实现数据和UI绑定的框架.而ViewModel和View可以通 ...

  2. mysql百万级分页优化

    普通分页 数据分页在网页中十分多见,分页一般都是limit start,offset,然后根据页码page计算start , 这种分页在几十万的时候分页效率就会比较低了,MySQL需要从头开始一直往后 ...

  3. javaMail

    JavaMail概述:        JavaMail是由Sun定义的一套收发电子邮件的API,不同的厂商可以提供自己的实现类.但它并没有包含在JDK中,而是作为JavaEE的一部分. javaMai ...

  4. 使用Metrics.NET 构建 ASP.NET MVC 应用程序的性能指标

    通常我们需要监测ASP.NET MVC 或 Web API 的应用程序的性能时,通常采用的是自定义性能计数器,性能计数器会引发无休止的运维问题(损坏的计数器.权限问题等).这篇文章向你介绍一个新的替代 ...

  5. WPF自定义控件第二 - 转盘按钮控件

    继之前那个控件,又做了一个原理差不多的控件.这个控件主要模仿百度贴吧WP版帖子浏览界面左下角那个弹出的按钮盘.希望对大家有帮助. 这个控件和之前的也差不多,为了不让大家白看,文章最后发干货. 由于这个 ...

  6. Unity3D和Egret3D的基情

    Unity3D依靠多平台发布这个核心特点,目前如日中天,屌丝引擎之王绝无来者.Egret白鹭引擎,也着实在微信上刷了一屏又一屏.这二者似乎风马牛不相及,但是这个无处不搞基的年代,让一切皆有可能. U3 ...

  7. ASP.NET Web API 开篇示例介绍

    ASP.NET Web API 开篇示例介绍 ASP.NET Web API 对于我这个初学者来说ASP.NET Web API这个框架很陌生又熟悉着. 陌生的是ASP.NET Web API是一个全 ...

  8. 小丁是怎样入门git的

    0x01前言 既然没有华丽的出场,那就平凡的分享,首先我要说明一点本篇文章针对Git初学者,对我自己学Git的资源的整合,其实本篇索引应该在我写Git系列文章的时候就紧跟着放上索引的,由于时间问题没有 ...

  9. 【java】jstack

    介绍 jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jsta ...

  10. Vue.js入门

    之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...