效果：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. 14门Linux课程，打通你Linux的任督二脉！

    Linux有很多优点:安全.自主.开源--,也正是这些优点使得很多人都在学Linux. 虽说网上有大把的Linux课程资源,但是对很多小白来说网上的课程资源比较零散并不适合新手学习. 正因为此,总结了 ...

  2. T-SQL学习记录

    T-sql是对SQL(structure query language )的升级.可以加函数. 系统数据库:master管理数据库.model模版数据库,msdb备份等操作需要用到的数据库,tempd ...

  3. 高级渲染技巧和代码示例 GPU Pro 7

    下载代码示例 移动设备正呈现着像素越来越高,屏幕尺寸越来越小的发展趋势. 由于像素着色的能耗非常大,因此 DPI 的增加以及移动设备固有的功耗受限环境为降低像素着色成本带来了巨大的压力. MSAA 有 ...

  4. POJ3693 Maximum repetition substring [后缀数组 ST表]

    Maximum repetition substring Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9458   Acc ...

  5. 【腾讯bugly干货分享】微信Android热补丁实践演进之路

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1264& ...

  6. C#与C++的发展历程第一 - 由C#3.0起

    俗话说学以致用,本系列的出发点就在于总结C#和C++的一些新特性,并给出实例说明这些新特性的使用场景.前几篇文章将以C#的新特性为纲领,并同时介绍C++中相似的功能的新特性,最后一篇文章将总结之前几篇 ...

  7. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...

  8. Python初学者之网络爬虫(二)

    声明:本文内容和涉及到的代码仅限于个人学习,任何人不得作为商业用途.转载请附上此文章地址 本篇文章Python初学者之网络爬虫的继续,最新代码已提交到https://github.com/octans ...

  9. Atitit 动态按钮图片背景颜色与文字组合解决方案

    Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...

  10. iOScollectionView广告无限滚动(Swift实现)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...