<!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. PS教程超级合辑【800+集爆款课】

    第1章 导读——推荐大家到网易云课堂学习购买(本博文仅为个人学习笔记)https://study.163.com/course/courseMain.htm?courseId=1442008& ...

  2. Halcon11 Linux 下载

    Halcon11 Linux下载地址:http://www.211xun.com/download_page_3.html HALCON 11 是一套机器视觉图像处理库,由一千多个算子以及底层的数据管 ...

  3. java 例子

    1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一个重要的命令javac ...

  4. 【bzoj5018】[Snoi2017]英雄联盟 背包dp

    题目描述 正在上大学的小皮球热爱英雄联盟这款游戏,而且打的很菜,被网友们戏称为「小学生」.现在,小皮球终于受不了网友们的嘲讽,决定变强了,他变强的方法就是:买皮肤!小皮球只会玩N个英雄,因此,他也只准 ...

  5. WS-*协议栈及相关概念

    1. 什么是WS-Security? WS-Security 是一个 SOAP 的扩展,它提供了对 SOAP 消息的认证和加密. 在介绍 WS-Security 之前,我们有必要了解一下 WS-Sec ...

  6. 求和为s的连续正数序列

    输入一个正数是s,打印出所有和为s的连续正数序列(至少含有两个数).例如输入15,由于1+2+3+4+5=4+5+6==7+8=15,所有结果打印出3个序列1-5,4-6,7-8. 代码如下: voi ...

  7. 个人环境搭建——ANT安装

    ANT安装 ant的安装有两种方式: 第一种,手动安装 (1)首先需要在Apache官网下载最新版的Ant,下载地址为:http://ant.apache.org/bindownload.cgi   ...

  8. 初识laytpl

    laytpl-精致巧妙的JavaScript模板引擎 这两天在做一个mui项目,列表需要循环很多的数据.在公司同事的指引下认识了这个新的模板--laytpl.我只想说,很好用们很巧妙. 废话不多说,直 ...

  9. 大陆争霸（bzoj 1922）

    Description 在一个遥远的世界里有两个国家:位于大陆西端的杰森国和位于大陆东端的 克里斯国.两个国家的人民分别信仰两个对立的神:杰森国信仰象征黑暗和毁灭 的神曾·布拉泽,而克里斯国信仰象征光 ...

  10. Mysql EXISTS NOT EXISTS

    SELECT c.CustomerId, CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID FROM Orders o WHERE o ...