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. php stristr()函数 语法

    php stristr()函数 语法 作用:返回一个字符串在另一个字符串中开始位置到结束的字符串,不区分大小写.直线电机厂家怎么样? 语法:stristr(string,search,before_s ...

  2. Fractal

    Fractal 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 This is the logo of PKUACM 2016. More specifically, th ...

  3. PHP读取XML文件数据获取节点值

    最近在接入渠道的时候遇到接口返回是xml数据.现在接口数据返回json数据格式比较常见. 如何获取xml里面真正数据? 对象结果集合单个值的强制转换处理.(直接代码说明) demo示例:  创建xml ...

  4. IP地址的分类及各类IP的最大网络数、网络号范围和最大主机数

    总结自谢希仁老师的<计算机网络>第五版 每一类网络地址都由两部分组成:网络号net-id+主机号host-id.IP地址的分类可以参看下图: 可以看到各个类别的区别,同时,所有的类别都是3 ...

  5. scau 1142 巡逻的士兵（分治）

    1142 巡逻的士兵 时间限制:1000MS  内存限制:65536K 提交次数:217 通过次数:58 题型: 编程题   语言: G++;GCC Description 有N个士兵站成一队列, 现 ...

  6. Apache检查配置文件语法

    Windows环境:httpd -t或者: httpd.exe -w -t -f "C:\Apache2.2\conf\httpd.conf" -d "C:\Apache ...

  7. Oracle 11g修改默认端口1521为其他值

    1.修改listener.ora 打开文件D:\app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN\listener.ora,修改PORT ...

  8. jenkins之启动与关闭

    jenkins可以通过内置的应用服务器或者借助其他应用服务器启动 目录 1.启动jenkins 2.关闭jenkins 3.重启jenkins 4.重新加载jenkins配置信息 1.启动jenkin ...

  9. Gitlab仓库搭建和免密使用gitlab

    Gitlab简介 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务. 可通过Web界面进行访问公开的或者私人项目.它拥有与Github类似的 ...

  10. HashMap和布隆过滤器命中性能测试

    package datafilter; import com.google.common.base.Stopwatch; import com.google.common.hash.BloomFilt ...