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. 【大量干货】史上最完整的Tengine HTTPS原理解析、实践与调试

    本文邀请阿里云CDN HTTPS技术专家金九,分享Tengine的一些HTTPS实践经验.内容主要有四个方面:HTTPS趋势.HTTPS基础.HTTPS实践.HTTPS调试. 一.HTTPS趋势 这一 ...

  2. 请问有支持直接从 word 文档复制图片的 editor 吗

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  3. 洛谷 P4300 BZOJ 1266 [AHOI2006]上学路线route

    题目描述 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信息学奥林匹克竞赛小组才发现每天上学的乘车路线不一定是最优的. 可可:“很可能我们在 ...

  4. 定时任务cron表达式解析

    cron表达式2种: Seconds Minutes Hours DayofMonth Month DayofWeek Year或 Seconds Minutes Hours DayofMonth M ...

  5. 后端技术杂谈7：OpenStack的基石KVM

    Qemu,KVM,Virsh傻傻的分不清 本文转载自Itweet的博客 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://gi ...

  6. php函数名后冒号+数据类型（返回值类型限制/php新特性）

    在PHP7,一个新的功能,返回类型声明已被引入.返回类型声明指定的一个函数返回值的类型. int float bool string interfaces array callable 对象实例 如下 ...

  7. 手动修改key 伪修改内存变量

    # -*- coding: UTF-8 -*- import math import random import sys import threading import time from time ...

  8. scrapy电影天堂实战(一)创建数据库

    原文链接 这里的排版没微信公众号那么友好,建议查看公众号原文 创建数据库 首先我们需要创建数据库和表等来存储数据 创建mysql.cnf配置文件 oot@ubuntu:/mnt/test_scrapy ...

  9. php基础/类型

    1.php的格式: <?php ?> 内嵌格式: <? ?> (php可以写在html文件里面) 2.php的输出:echo (每段的结束必须加;) 3.定义变量: 不需要管他 ...

  10. redis centos集群搭建和java应用

    1. 首先要ssh免密登录 redis集群,3台虚拟机,6个节点,每台机器2个节点一主一从. 192.168.132.154 c0192.168.132.156 c1192.168.132.155 c ...