<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>鼠标悬停时显示图片边框和文字描写叙述的图片特效</title>

<style type="text/css">

body{margin: 0;padding: 0;font: normal 10px Verdana, Arial, Helvetica, sans-serif;line-height: 1.8em;background: #1d1d1d url(bg.jpg) repeat;}

a{color:#999;}

h1{font-family:Georgia, "Times New Roman", Times, serif;text-align: center;font-weight: normal;font-size: 4em;line-height: 1.2em;margin: 0; padding: 20px 0;color:#999;font-size:18px;}

img{border: none;}

ul.gnineh{width: 960px;list-style: none;margin: 0 auto; padding: 0;}

ul.gnineh li{width: 220px;float: left; display: inline;margin: 10px; padding: 0;position: relative;}

ul.gnineh li:hover{z-index: 99;}

ul.gnineh li img{position: relative;filter: alpha(opacity=30);opacity: 0.3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";}

ul.gnineh li:hover img{z-index: 999;filter: alpha(opacity=100);opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

ul.gnineh li .info{position: absolute;left: -10px; top: -10px;padding: 210px 10px 20px;width: 220px;display: none;background: #fff;font-size: 1.2em;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

ul.gnineh li:hover .info{display: block;}

ul.gnineh li h2{font-size: 1.2em;font-weight: normal;text-transform: uppercase;margin: 0; padding: 10px 0;}

ul.gnineh li p{padding: 0; margin: 0; font-size: 0.9em;}

body{font-size:12px;font-family:'Arial';line-height:25px;}

#header{background:#000;height:30px;line-height:30px;margin-bottom:20px;}

#header h2{float:left;margin:0px 10px;}

#header h2 a{color:#fff;}

#main{width:950px;margin:0px auto}

.code{border:#ccc 1px solid;background:#ffffcc;padding:10px;}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<h1>纯CSS实现的鼠标触及显示边框和描写叙述的图片特效</h1>

<ul class="gnineh">

<li><a href="/"><img src="wall_s3.jpg" alt=""></a><div class="info"><h2>漂亮荃银高科</h2><p>新车上市堪比波音。

</p></div></li>

<li><a href="/"><img src="wall_s4.jpg" alt=""></a><div class="info"><h2>我的小狗</h2><p>非常可爱的猩猩</p></div></li>

<li><a href="/"><img src="wall_s5.jpg" alt=""></a><div class="info"><h2>穿过市区</h2><p>是郊外的清凉</p></div></li>

<li><a href="/"><img src="wall_s6.jpg" alt=""></a><div class="info"><h2>梦中情人</h2><p>回首一眸万物俱焚</p></div></li>

</ul>

</body>

</html>

CSS实现鼠标放图片上显示白色边框+文字描写叙述的更多相关文章

  1. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  2. CSS如何实现把鼠标放在行上整行变色

    CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...

  3. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  4. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

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

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

  6. 鼠标放上去，div高度随文字增加，并显示剩余的文字。

    /*这里是鼠标放上去显示全名   */    .kb2wText{display:block; height:20px; width:150px; line-height:20px; color:#0 ...

  7. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  8. css实现在图片上显示文字

    一. 准备工作 1. 点击此下载 相关的文件 二. 浏览器中运行 play-img.html 文件,即可显示效果 三. 效果图

  9. jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...

随机推荐

  1. Java学习2

    final在修饰类时,并不限制用户修改对象包含的变量值,只是限制了对象的主转移,只能针对某一个对象进行操作,中途不可更改对象. 重写父类的方法 重写(Override)和重载(Overload)都是针 ...

  2. Python面向对象之类的继承（2）

    1.除了封装,Python面向对象还有继承这一功能,如下代码,这是简单的继承功能. class Animal: def chi(self): print(self.name+' 吃') def he( ...

  3. Codeforces 1038F Wrap Around (Codeforces Round #508 (Div. 2) F) 题解

    写在前面 此题数据量居然才出到\(n=40\)???(黑人问号)以下给出一个串长\(|S|=100,n=10^9\)的题解. 题目描述 给一个长度不超过\(m\)的01串S,问有多少个长度不超过\(n ...

  4. BZOJ1797 [Ahoi2009]Mincut 最小割 【最小割唯一性判定】

    题目 A,B两个国家正在交战,其中A国的物资运输网中有N个中转站,M条单向道路.设其中第i (1≤i≤M)条道路连接了vi,ui两个中转站,那么中转站vi可以通过该道路到达ui中转站,如果切断这条道路 ...

  5. 城市改造 (city)

    城市改造 (city) 题目描述 为了节约当前社会巨大的能源消耗,A 城市发起了新能源改造计划,也就是用太阳能代替旧能源.为了简化题意,可以假设 A 城市在一个二维平面上,平面上从11到nn每一个地方 ...

  6. python的get和post

    postimport urlliimport urllib #post数据value = {}value['username']='aaaa'value['password']='123123'dat ...

  7. HDU 3853 LOOPS 概率DP入门

    LOOPS Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others)Total Sub ...

  8. NOI2001食物链

    描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A吃B,B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人 ...

  9. Eigen－－简单的C++矩阵计算库

    晚上突然想写一段小C++程序,要用到矩阵求逆呀乘法呀之类的,所以找了一下有什么现成的可用的C++矩阵计算相关的库,发现有一大堆,在其中各种各样的配置,感觉比较麻烦.从方便性来说Eigen是最方便的了, ...

  10. java模拟一次简单的sql注入

    在数据库中生成 一个用户表  有用户名 username 和密码password 字段 并插入两组数据 正常的sql查询结果 非正常查询途径返回的结果 下面用一段java代码 演示一下用户登录时的sq ...