<!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. Unity3D_异步加载场景（进度条）

    创建两个场景:现在的场景“NowScene”,要加载的场景“LoadScene”: “NowScene”如图所示,“LoadScene”任意: 创建脚本“AsyncLoadScene”,复制如下代码, ...

  2. chrome+postman测试rest请求

    1.在chrome安装postman 2.在chrome打开postman 浏览器输入:chrome://apps/ 选择你的postman 3.在你看到的postman中 normal中可以看到参数 ...

  3. iOS-@inerface的11条规范写法

    总结一些interface声明时的规范,相关宏的介绍,定义方法时有用的修饰符,编写注释的规范,最终写出一个合格的头文件. 1.读写权限 1.1实例变量的@public,@protected,@priv ...

  4. BZOJ3531 [Sdoi2014]旅行 【树剖 + 线段树】

    题目 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰.为了方便,我们用 ...

  5. Java众神之路（2）-标志符

    标志符 1.1标志符:用来标志类名.变量名.方法名.类型名.文件名的有效字符序列成为标志符. 1.2命名规则: Java语言规定标志符由字母(a-zA-Z).下划线(_).美元符号($)和数字(0-9 ...

  6. 双倍回文（bzoj 2342）

    Description Input 输入分为两行,第一行为一个整数,表示字符串的长度,第二行有个连续的小写的英文字符,表示字符串的内容. Output 输出文件只有一行,即:输入数据中字符串的最长双倍 ...

  7. 虚拟 ​router 原理分析

    上一节我们创建了虚拟路由器“router_100_101”,并通过 ping 验证了 vlan100 和 vlan101 已经连通. 本节将重点分析其中的原理. 首先我们查看控制节点的 linux b ...

  8. 洛谷P1965 转圈游戏 [NOIP2013]

    题目描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置,……,依此 ...

  9. Swing要点

    1. 布局管理器会控制潜逃在其他组件中组件的大小和位置. 2. 当某个组件加到背景组件上面时,被加入的组件是由背景组件的布局管理器管理的. 3. 布局管理器在做决定之前会询问组件的理想大小(setSi ...

  10. eclipse集成JBPM

    JBPM4.4是一款运用的比较广泛的工作流开发框架,最近参与的BSS项目里面也有用到了JBPM4.4.自己在已经搭建的框架下使用,但更详细的理解并没有.因此借此机会学习一下. 学习版本为:JBPM为4 ...