今天看到一个用css3制作的简单的展示页面所以，我自己又是初学者所以决定模仿着写一个，下面右边是一开始的，右边是鼠标放上去暂时的。这个是由下到上逐渐显示的首先直接上代码。

  <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <link rel="stylesheet" href="./style.css">

   <title>Document</title>

 </head>

 <body>

   <div class="box">

     <div class="pic">

       <img src="./1.jpeg" alt="">

     </div>

     <div class="desc">

       <div class="title">

         <span>立即订制</span>

       </div>

       <div class="ui">

         <p>ui课程设计</p>

         <p>***人在学习</p>

       </div>

     </div>

   </div>

 </body>

 </html>

下面是css代码

* {

  padding: 0px;

  border: 0px;

}

.box {

  width: 300px;

  height: 300px;

  margin: 100px auto;

  position: relative;

  text-align: center;

}

.pic {

  width: 100%;

  height: 100%;

}

.pic img {

  width: 100%;

  height: 100%;

}

.desc {

  position: absolute;

  bottom: 0px;

  width: 100%;

  /* width: 0px; */

  height: 0px;

  overflow: hidden;

  text-align: center;

  opacity: 0.5;

  transition: all 0.6s;

}

.desc .title {

    width: 80%;

}

.box:hover .desc{

  height: 100%;

  width: 100%;

  border: 1px solid red;

  background-color: black;

}

.box:hover .title{

  margin-top: 120px;

}

.desc .title span {

  border: 1px solid red;

  color: red;

  padding-left: 20%;

  padding-right: 20%;

  margin: 0;

}

.ui p {

  float: left;

  margin: 10px 10px 0px 30px;

  color: white;

}

下面展示我做的，由于是初学所以对与美化不是太好

这就是效果了，主要是用了

.box:hover .desc{

  height: 100%;

  width: 100%;

  border: 1px solid red;

  background-color: black;

}

同时，你可以直接用bottom,或left或top或right你会发现这个有不同的效果

css3制作商品展示的更多相关文章

  1. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  4. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  5. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  6. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  7. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. BonBon - 使用 CSS3 制作甜美的糖果按钮

    BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...

  9. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

随机推荐

  1. 如何备份/迁移wordpress网站

    暴力方法,完全备份网站目录及数据库,上传到新主机 首先,如果是迁移到其他新主机中,需要将新主机的环境配置好,还有对应网站目录和数据库,这些尽量和旧主机一样的设置 接下来,备份旧主机文件,找到网站目录, ...

  2. Kali学习笔记33：Linux系统缓冲区溢出实验

    之前做过一个Windows应用SLmail的缓冲区溢出的实验 这次来做一个Linux平台的缓冲区溢出实验: 缓冲区溢出是什么? 学过汇编的应该知道,当缓冲区边界限制不严格时,由于变量传入畸形数据或程序 ...

  3. 使用本地缓存快还是使用redis缓存好？

    使用本地缓存快还是使用redis缓存好? Redis早已家喻户晓,其性能自不必多说. 但是总有些时候,我们想把性能再提升一点,想着redis是个远程服务,性能也许不够,于是想用本地缓存试试!想法是不错 ...

  4. 算法：时间复杂度+二分查找法(Java/Go/Python)实现

    导读 曾几何时学好数据结构与算法是我们从事计算机相关工作的基本前提,然而现在很多程序员从事的工作都是在用高级程序设计语言(如Java)开发业务代码,久而久之,对于数据结构和算法就变得有些陌生了,由于长 ...

  5. Xamarin.Android 启动页

    打开软件的时候相当慢,会有白屏显示,这样的用户体验效果不好,所以需要增加一个启动页来过渡.步骤如下: 第一步:根据自己需求找到一个png图片,用于启动展示,放在Drawable 文件夹下,我这里命名为 ...

  6. C# 多线程锁之ReaderWriterLockSlim

    1.简介 .NET 3.5 开始 ReaderWriterLockSlim登上舞台,ReaderWriterLockSlim 可以看做是 ReaderWriterLock 的升级版. 由于 Reade ...

  7. mysql 导入 CSV文件命令行 ERROR 13 (HY000): Can't get stat of

    一定要查看好CSV字段结构是否和文件的表结构字段一致 load data local infile 'F:/MySqlData/test1.csv' --CSV文件存放路径 into table st ...

  8. Android--Activity中使用Intent传值

    Intent,又称为意图,是一种运行时绑定机制,它能在程序运行的过程中链接两个不同的组件(Activity.Service.BroadcastReceiver).通过Intent,程序可以向Andro ...

  9. [Java 泥水匠] Java Components 之一：Java String （肯定有你不懂的）

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 1.1 前言 说起String,大家最熟悉不 ...

  10. leetcode — unique-paths-ii

    /** * Source : https://oj.leetcode.com/problems/unique-paths-ii/ * * * Follow up for "Unique Pa ...