demo.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>商品展示</title>

    <link rel="stylesheet" type="text/css" href="demo.css">

    <script type="text/javascript" src="demo.js"></script>

</head>

<body>

<div  class="demo" >

    <ul>

        <li>

            <a href="http://baidu.com">

                <img src="1.jpg"/>

                <span>学会html5 你就是赢家</span>

           </a>

        </li>

        <li>

            <a href="http://baidu.com">

                <img src="1.jpg"/>

                <span>学会html5 你就是赢家</span>

            </a>

        </li>

        <li>

            <a href="http://baidu.com">

                <img src="1.jpg"/>

                <span>学会html5 你就是赢家</span>

            </a>

        </li>

    </ul>

</div>

</body>

</html>

demo.css

div,ul,li,dl,dt,dd {

    margin:0;

    padding:0;

}

ul,li,dl,dt,dd {

    list-style: none;

}

.demo{

    width:930px;

}

.demo ul li {

    float:left;

    width:300px;

    margin-right: 6px;

    position:relative;

}

.demo ul li img{

    border:none;

    position:relative;

    z-index:22;

}

.demo ul li a{

    width:300px;

    display:block;

    border:2px solid #ccc;

}

.demo ul li a:hover{

    border:2px solid #C03;

}

.demo ul li a span{

    position:absolute;

    z-index:33;

    bottom:2px;

    left:2px;

    width:300px;

    height:40px;

    filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;

    background:#000;

    color:#fff;

    line-height:40px;

    text-align:center;

    display:none;

}

.demo ul li a:hover span{

    display:block;

}

　　效果：

图片

    21:32:21 2017-09-06

html/css 图片展示效果的更多相关文章

  1. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  2. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  3. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  4. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  5. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  6. css图片切换效果分析+翻译整理

    Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/1 ...

  7. lightbox图片展示效果

    1.lightbox 头部导入: <script type="text/javascript" src="../Public/Js/prototype.js&quo ...

  8. css 图片波浪效果

    参考:https://blog.csdn.net/zhichaosong/article/details/80944924#_99 效果: wave2.png html: <!DOCTYPE h ...

  9. css实现六边形图片（最简单易懂方法实现高逼格图片展示）

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

随机推荐

  1. linux运维、架构之路-Zabbix自动化

    一.Zabbix自定义监控 web01客户端修改/etc/zabbix/zabbix_agentd.conf [root@m01 tools]# echo "UserParameter=lo ...

  2. Python全栈开发，Day3

    一.基本数据类型 基础数据类型,有7种类型,存在即合理. 1.int 整数 主要是做运算的.比如加减乘除,幂,取余 + - * / **  % ... 2.bool 布尔值 判断真假以及作为条件变量 ...

  3. instagram

    https://www.instagram.com/graphql/query/?query_hash=42323d64886122307be10013ad2dcc44&variables={ ...

  4. HTML中<input>和<textarea>的区别

    在HTML中有两种方式表达文本框 一个是<input>元素的单行文本框 一种是<textarea>的多行文本框. <input>元素: 1.一定要指定type的值为 ...

  5. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

  6. hypermesh生成MNF柔性体

    软件HyperworksX 2019: 该版本默认的是optistruct模板 1.导入几何→分网→材料定义(注意单位,建议统一mks单位制)→定义单元属性→创建刚性单元: 2.创建load coll ...

  7. 新手如何创建一个vue项目 ---vue---新手创建第一个项目

    1.第一步安装node.js https://nodejs.org/en/ 前期可以下载软件包,后期熟练以后可以通过nvm进行 Node的版本切换以及升级 然后window+r  输入cmd 打开命令 ...

  8. PHP获得计算机的唯一标识[cpu,网卡]

    以下是从网上转载来的源码,但是我测试均不能执行,不知道怎么回事,转过来大家可以交流一下 <?php//获取电脑的CPU信息 function OnlyU(){ $a = ''; $b = arr ...

  9. HTML--JS 随机背景色

    <html> <head> <title>背景随机变色</title> <script type="text/javascript&qu ...

  10. 写的一个双向链表，测试OK

    #include <stdio.h> #include <stdlib.h> #include <assert.h> typedef struct DoubleLi ...