<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<meta charset="utf-8" />
<title>CSS3悬停放大图片两边模糊显示 - 站长素材</title>

</head>
<body>
<br><br><br>

<div class="wrapper">
<div class="box">
<div class="product">
<span class="name">T-shirt</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
<div class="box">
<div class="product">
<span class="name">T-shirt</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
<div class="box">
<div class="product">
<span class="name">T-shirt</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>

</body>
</html>

/*css部分*/

body {
margin: 0;
background: #d8f0ea;
}
h1, p, span {
font-family: monospace;
font-weight: 300;
text-align: center;
color: rgba(0, 0, 0, 0.5);
}
h1, h1 + p {
margin: 2rem 1rem;
}
.wrapper {
max-width: 60rem;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 3rem;

/*弹性布局 wrap 多行排列自动换行 flexstart 换行后左侧对其效果*/
flex-wrap: wrap;
-webkit-justify-content:flex-start;
justify-content:flex-start;

}
.box {
width: 15rem;
height: 20rem;
padding: 0 2rem 3rem;

-webkit-transition: opacity 0.5s linear 0.3s,
-webkit-transform 0.3s linear 0s,
-webkit-filter 0.5s linear 0.3s;
transition: opacity 0.5s linear 0.3s,
-webkit-transform 0.3s linear 0s,
-webkit-filter 0.5s linear 0.3s;

transition: transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;

transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s,

-webkit-transform 0.3s linear 0s,
-webkit-filter 0.5s linear 0.3s;
/*transform-origin: top center;*/
}
.product {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(../img/shirts.jpg);
background-color: #fff;
background-position: top 3rem center;
background-size: 80%;
background-repeat: no-repeat;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
-webkit-transition: box-shadow 0.5s linear,
height 0.1s linear 0s;
transition:
box-shadow 0.5s linear,
height 0.1s linear 0s;
}
.name {
display: block;
padding: 1rem 0.5rem;
}
.description {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: block;
padding: 0 1.5rem;
opacity: 0;
-webkit-transition: opacity 0.1s linear 0s;
transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover) {
/*-webkit-filter: blur(3px);
filter: blur(3px);*/
opacity: 0.5;

/*yinyingxiaoguo*/
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
.box:hover {
-webkit-transform: scale(2.2);/*放大倍数*/
transform: scale(2.2);

-webkit-transition: opacity 0.1s linear 0s,/*透明度 linear动画从头到尾的速度是相同的。*/
-webkit-transform 0.3s linear 0.3s,
-webkit-filter 0.1s linear 0s;

transition: opacity 0.1s linear 0s,
-webkit-transform 0.3s linear 0.3s,
-webkit-filter 0.1s linear 0s;

transition: transform 0.3s linear 0.3s,/*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s,
-webkit-transform 0.3s linear 0.3s,
-webkit-filter 0.1s linear 0s;
}
.box:hover .product {
height: 23rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
-webkit-transition: box-shadow 1s linear,
height 0.3s linear 0.5s;
transition:
box-shadow 1s linear,
height 0.3s linear 0.5s;
}
.box:hover .description {
opacity: 1;
-webkit-transition: opacity 0.3s linear 0.75s;
transition: opacity 0.3s linear 0.75s;
}

css3不错的教程的更多相关文章

  1. HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]

    <HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...

  2. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

  3. 超漂亮的CSS3按钮制作教程分享

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到G ...

  4. CSS3 box-shadow快速教程

    box-shadow 属性向框添加一个或多个阴影.这个CSS3的属性很常用,盒阴影.按钮状态等各种地方都有用到,但是你了解并记住各个参数的作用及用法吗? 展示 源码:http://codepen.io ...

  5. CSS3 3D笨蛋教程

    英文原文An Introduction to CSS 3-D Transforms 爱因斯坦说所有概念都必须介绍给儿童们,若他们无法了解,这些理论就毫无价值. 透视 一个元素需要一个透视点才能激活3D ...

  6. 关于学习springboot和springcloud的很不错的教程

    近日,逐步开始学习了springboot和springcloud.本以为很简单,但是随着学习的深入,发现其中有很多地方都需要认真揣摩.凡事都需要循序渐进,有一个好的开端就是成功的一半.于是在浩瀚的网络 ...

  7. CSS3 Flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  8. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

    本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...

  9. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

随机推荐

  1. [POJ 2689] Prime Distance

    Description 给定两个整数 \(L,R\;(1\leq L\leq R\leq 2^{31},R-L\leq 10^6)\) ,求闭区间 \([L,R]\) 中相邻两个数最大的差是多少,输出 ...

  2. Linux 强制安装 rpm 包

    Linux 正常安装 rpm 的命令是: rpm -ivh xxx.rpm 重复安装时需加属性: 软件包重复安装将会失败,若仍需要安装必须加 --replacepkgs 属性 软件包的某个文件已在安装 ...

  3. 解决默写浏览器中点击input输入框时，placeholder的值不消失的方法

    html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...

  4. asp.net mvc之自定义WebViewPage

    采用Razor引擎的View文件最终都会编译成一个WebViewPage类型, 通过自定义WebViewPage,添加相应的属性和方法,你可以很方便的在View里调用, 自定义WebViewPage只 ...

  5. Intellij Idea乱码解决方案

    使用Intellij Idea经常遇到的三种乱码问题: 1.工程代码乱码 2.main方法运行,控制台乱码 3.tomcat运行,控制台乱码 解决方案: 1.工程代码乱码 Settings > ...

  6. cgi、fastcgi及php-fpm分别是什么

    cgi cgi是通用网关接口定义.当web server收到/index.php这个请求后,会启动对应的CGI程序,这里就是PHP的解析器.接下来PHP解析器会解析php.ini文件,初始化执行环境, ...

  7. java多线程关键字volatile、lock、synchronized

    --------------------- 本文来自 旭日Follow_24 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/xuri24/article/detail ...

  8. c语言学习笔记-switch

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.switch函数意义 选择性执行 二.switch函数结构 switch(表达式) { case: 常量表达式; 语句1; ...

  9. Docker 搭建 ELK 收集并展示 tomcat 日志

    架构 前端展示 --> 索引搜索 <-- 日志提取及过滤 --> 日志缓存 <-- 日志收集 Kibana --> Elastash <-- Logstash -- ...

  10. css选择器：基本选择器

    基本选择器 1.通用元素选择器 *表示应用到所有的标签. *{ padding:0px; margin:0px; } 2.元素/标签选择器 匹配所有p标签的元素 p{ color:red; backg ...