<!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. Spring boot 上传文件大小限制

    1.spring boot 1.x 版本 application.properties 文件中 位置在(resources下) spring.http.multipart.maxFileSize = ...

  2. Web 安全问题 rel="noopener nofollw"

    1. noopener 如果你需要用 a 标签打开一个标签页时,你会使用 target='_blank' 这个属性,此时你需要添加 rel='noreferrer noopener' 当你使用 tar ...

  3. c++11特性使用

    #include <list> #include <iostream> int main(){ list<int> lst; for(list<int> ...

  4. 在Myeclipse8.5中安装findbugs方法

    step 1:首先从官网下载findbugs插件:http://downloads.sourceforge.net/project/findbugs/findbugs%20eclipse%20plug ...

  5. Python之数据结构：集合

    一.set集合 1.集合是一个无序不重复元素集,有去重的作用 set集合类需要的参数必须是迭代器类型的,如:序列.字典等,然后转换成无序不重复的元素集.由于集合是不重复的,所以可以对字符串.列表.元组 ...

  6. web储存用户信息

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. hash function 字符串哈希函数

    #include <stdio.h> int hash(const char *str) { ; ;;i++) { if (str[i] == '\0') break; sum += (( ...

  8. Linux Mint---安装篇

    先前接触过Debian6,埋头折腾已经是好几年前的事情了,后来就放下了,现在工作之余时间比较多,正好debian8.1出来了,于是乎装了个debian用,结果,自己其实还是一个菜蛋而已,连软件源怎么设 ...

  9. duilib入门简明教程 -- 部分bug (11) （转）

    原文转自:http://www.cnblogs.com/Alberl/p/3344886.html  一.WindowImplBase的bug     在第8个教程[2013 duilib入门简明教程 ...

  10. linux下轻松修改pdf文件

    前几天使用firefox打印了一个网页,后来查看有很多页面都是评论,对我来说,实在没有什么用处,就想把多余的内容给删除了,后来,终于找到了一个工具:pdf mod非常不错的工具,直接打开文件,选择要删 ...