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. 2，ArrayList

    一,ArrayList简介 1,ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长. 2,ArrayList 继承了AbstractList,实现了List ...

  2. python全栈开发，Day40（进程间通信(队列和管道)，进程间的数据共享Manager,进程池Pool）

    昨日内容回顾 进程 multiprocess Process —— 进程 在python中创建一个进程的模块 start daemon 守护进程 join 等待子进程执行结束 锁 Lock acqui ...

  3. 关于Reporting Services网站

    1.http://www.c-sharpcorner.com/search/sql%20server%20reporting%20services 2.https://msdn.microsoft.c ...

  4. 搭建 Nuget.Server

    公司项目容器化的需要, 小编研究将net framework项目升级成net standard 2.0,但是在打包上传nupkg 后,vs 的 nuget 插件不能识别依赖项,显示 Unsupport ...

  5. 虚拟机CentOS7安装docker并搭建Gitlab私服

    一.下载安装虚拟机和CentOS7系统 这些流程比较简单不会有什么坑,这里不再阐述 二.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验 ...

  6. 20180705-Java对象和类

    Java对象和类 Java作为一种面向对象语言.支持以下基本概念: 多态继承封装抽象类对象实例方法消息解析 本节我们重点研究对象和类的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个 ...

  7. UE4开发PSVR游戏，使用RazorGPU进行调试的方法

    打开Project Launcher,如果没有需要的Devkit平台目标,就点下方的Device Manager,右键Claim 相应的目标.如果已经出现在Project Launcher中,点击上方 ...

  8. 30 August

    DP 复习. 参考 redbag 博客 提供的题表. P2858 [USACO06FEB] Treats for the Cows 区间 DP. 转换思路,题面从外往里递推,我们采用从里往外递推,权值 ...

  9. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  10. 前端每日实战：6# 视频演示如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/qYqwQp 可交互视频教程 此视频是可以交 ...