<!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. maven学习（五）——maven命令的组合使用

    Maven的命令组合使用 maven的编译,清理,测试,打包,部署命令是可以几个命令同时组合起来使用的,常用的命令组合如下: 1.先清理再编译:"mvn clean compile" ...

  2. [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  3. Unity3D - 设计模式 - 工厂模式

    工厂模式:以食物生产为例 1. 一个生产食物的工厂(此项 需要建立两个类:食物基类<Food>,工厂类<Factory>) 2. 可以生产不同的食物(此项 建立食物的具体子类, ...

  4. 邻面合并（merging）

    邻面合并(merging) 题目描述 给定一个N×MN×M的网格,每个格子上写有0或1.现在用一些长方形覆盖其中写有1的格子,长方形的每条边都要与坐标轴平行.要求:每个写着1的格子都要被覆盖,长方形不 ...

  5. shell for 循环实践

    for循环语法结构如下 [root@backup tmp]# .sh #!/bin/bash ` do echo $i done [root@backup tmp]# .sh 3 批量修改文件名 [r ...

  6. 小M的作物 最大权闭合子图

    题目大意 bzoj 3438 两个田\(A,B\) \(n\le 1000\)种作物的种子 第\(i\)个种子,种\(A\)价值\(a[i]\),种\(B\)价值\(b[i]\) 再给出\(m\)个子 ...

  7. P1143 飘飘乎居士的约会

    P1143 飘飘乎居士的约会 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景  一阵狂风吹过  只听“pong”的一声,飘飘乎居士降落了!!! 描述 又是美妙 ...

  8. 【CodeChef】PARADE（费用流，最短路）

    题意: 思路: #include<cstdio> #include<iostream> #include<algorithm> #include<cstrin ...

  9. c#使用Split分割字符串的几种方法

    原文发布时间为:2009-03-07 -- 来源于本人的百度文章 [由搬家工具导入] 最近发现很多人在问在c#中使用Split等分割字符串的方法，今天有时间所以把使用Split等分割字符串的方法做了一 ...

  10. poj 3254 Corn Fields 状压dp入门

    题目链接 题意 在\(M\times N\)的\(0,1\)格子上放东西,只有标记为\(1\)的格子可以放东西,且相邻的格子不能同时放东西.问有多少种放法. 思路 参考:swallowblank. \ ...