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监控

    一.监控常用命令 1.物理服务器监控命令 ①添加yum源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/rep ...

  2. 数字类别生成onehot

    对应行的列#原始标签 my_label = np.array([3,4,2,4,6,1]) #类别数量 num_class = 6 #样本数量 num = my_label.shape[0] #生成o ...

  3. 【CF1255A】Changing Volume【思维】

    题意:每次可以-5/-2/-1/+1/+2/+5,问是否存在方案使得A变成B 题解:首先我们可以设A<B,若A>B,则交换AB,因为A到B和B到A是互逆的过程,所以可以交换 其次将B-=A ...

  4. C#仿QQ皮肤－Label与ListBox 控件实现----寻求滚动条的解决方案

    大家还是先来看看效果吧 这次之所以一次写两个控件,其实主要是因为Label控件实在是太简单了没有必要放放一个文章里写,所以就一次性来了.Label控件我就不再多说了,我直接把代码贴一下吧因为就几行代码 ...

  5. webApp 页面布局

    1. 流式布局 概念:流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法:布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽然可以让各种屏幕适配,但是显 ...

  6. 一文读懂PID控制算法（抛弃公式，从原理上真正理解PID控制）

      PID控制应该算是应用非常广泛的控制算法了.小到控制一个元件的温度,大到控制无人机的飞行姿态和飞行速度等等,都可以使用PID控制.这里我们从原理上来理解PID控制. PID(proportion ...

  7. linux文件夹　权限为所有用户可 读写

    使用命令: sudo chmod dirname -R

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

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

  9. Dos.ORM（原Hxj.Data）- 目录、介绍

    引言: Dos.ORM(原Hxj.Data)于2009年发布.2015年正式开源,该组件已在数百个成熟项目中应用,是目前国内用户量最大.最活跃.最完善的国产ORM.初期开发过程中参考了NBear与My ...

  10. 第1 章 mysql数据库之简单的DDL和DML sql语句

    一.SQL 介绍 1.什么是sql? SQL,英文全称(Structured Query Language),中文是结构化查询语言,它是一种对关系数据库中数据进行定义和操作的语言方法,是大多数关系数据 ...