FancyImage / 你的程序健康吗 / kubetrain.cn
This commit is contained in:
huanqing.shao
@ -1,129 +1,27 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="type" :src="src" :alt="alt" :title="title" :description="description"></component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Diamond from './fancy-images/Diamond'
|
||||
import Cross from './fancy-images/Cross'
|
||||
import Rectangle from './fancy-images/Rectangle'
|
||||
import Rolling from './fancy-images/Rolling'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true }
|
||||
description: { type: String, required: true },
|
||||
type: { type: String, required: false, default: 'Diamond' }
|
||||
},
|
||||
components: {
|
||||
Diamond, Cross, Rectangle, Rolling
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.box{
|
||||
background: linear-gradient(#8E2DE2,#4A00E0);
|
||||
font-family: 'Merriweather Sans', sans-serif;
|
||||
border-radius: 7px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box:before{
|
||||
content: "";
|
||||
background: -webkit-repeating-linear-gradient(45deg,rgba(0, 0, 0, 0.1) 10px,
|
||||
transparent 10px,transparent 20px,rgba(0,0,0,0.1) 20px,rgba(0,0,0,0.1) 30px,
|
||||
transparent 30px,transparent 40px,rgba(0,0,0,0.1) 40px,rgba(0,0,0,0.1) 50px,
|
||||
transparent 50px,transparent 60px,rgba(0,0,0,0.1) 60px,rgba(0,0,0,0.1) 70px,
|
||||
transparent 70px,transparent 80px,rgba(0, 0,0, 0.1) 80px,
|
||||
rgba(0, 0,0, 0.1) 90px,transparent 90px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover:before{ opacity:1; }
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: all 0.5s ease;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
|
||||
}
|
||||
.box:hover img{
|
||||
opacity: 0.5;
|
||||
-webkit-clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
}
|
||||
.box .box-content{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-55deg);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(0deg);
|
||||
}
|
||||
.box .title{
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 5px #000;
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
.box .post{
|
||||
font-size: 16px;
|
||||
text-shadow: 0 0 5px #000;
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
transform: rotateX(180deg);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box:hover .icon{
|
||||
opacity: 1;
|
||||
transform: rotate(0);
|
||||
}
|
||||
.box .icon li a{
|
||||
color: #4A00E0;
|
||||
background-color: #fff;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 0 7px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all .5s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #8E2DE2;
|
||||
box-shadow: 0 0 15px #fff;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box { margin: 0 0 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -38,6 +38,14 @@ module.exports = [
|
||||
action: '去抢',
|
||||
url: 'https://www.aliyun.com/1111/2019/home?userCode=obezo3pg',
|
||||
weight: 30
|
||||
},
|
||||
{
|
||||
name: 'Kubetrain',
|
||||
description: 'K8S在线直播培训，首次开班优惠',
|
||||
strong: '不满意可无条件退款',
|
||||
action: '再不去没名额啦',
|
||||
url: 'https://kubetrain.cn/?from=kuboard-ads',
|
||||
weight: 30
|
||||
}
|
||||
|
||||
// {
|
||||
|
||||
166
.vuepress/components/fancy-images/Cross.vue
Normal file
166
.vuepress/components/fancy-images/Cross.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<div class="content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
<!-- <ul class="icon">
|
||||
<li><a href="#"><i class="fa fa-search"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-link"></i></a></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
font-family: 'Merriweather Sans', sans-serif;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.box:before,
|
||||
.box:after,
|
||||
.box .box-content:before,
|
||||
.box .box-content:after{
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: #E65100;
|
||||
opacity: 0.8;
|
||||
transform: translateX(-50%) translateY(0%);
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
|
||||
clip-path: polygon(0 0, 50% 100%, 100% 0);
|
||||
transition: all .3s;
|
||||
}
|
||||
.box:after{
|
||||
transform: translateX(-50%) translateY(0%);
|
||||
top: auto;
|
||||
bottom: -50%;
|
||||
z-index: 0;
|
||||
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
.box .box-content:before{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
transform: translateX(0%) translateY(-50%);
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: -50%;
|
||||
-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
|
||||
clip-path: polygon(100% 0, 0 50%, 100% 100%);
|
||||
}
|
||||
.box .box-content:after{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
transform: translateX(0%) translateY(-50%);
|
||||
top: 50%;
|
||||
right: auto;
|
||||
left: -50%;
|
||||
z-index: 0;
|
||||
-webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
|
||||
clip-path: polygon(0 100%, 100% 50%, 0 0);
|
||||
}
|
||||
.box:hover:before{ top:0; }
|
||||
.box:hover:after{ bottom:0; }
|
||||
.box:hover .box-content:before{ right:0; }
|
||||
.box:hover .box-content:after{ left:0; }
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: scale(1);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover img{ transform: scale(1.5); }
|
||||
.box .box-content{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.box .content{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
.box .title{
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 5px;
|
||||
transform: rotateY(360deg) scale(0);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover .title{ transform: rotateY(0) scale(1); }
|
||||
.box .post{
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: capitalize;
|
||||
margin: 0 0 15px;
|
||||
display: block;
|
||||
transform: rotateY(360deg) scale(0);
|
||||
transition: all 0.5s ease 0.25s;
|
||||
}
|
||||
.box:hover .post{ transform: rotateY(0) scale(1); }
|
||||
.box .icon{
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
transform: rotateY(360deg) scale(0);
|
||||
transition: all 0.5s ease 0.45s;
|
||||
}
|
||||
.box:hover .icon{ transform: rotateY(0) scale(1); }
|
||||
.box .icon li{
|
||||
display: inline-block;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.box .icon li a{
|
||||
color: #E65100;
|
||||
background-color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #fff;
|
||||
background-color: #E65100;
|
||||
box-shadow: 0 0 10px #000;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box{ margin-bottom: 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 22px; }
|
||||
}
|
||||
</style>
|
||||
129
.vuepress/components/fancy-images/Diamond.vue
Normal file
129
.vuepress/components/fancy-images/Diamond.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.box{
|
||||
background: linear-gradient(#8E2DE2,#4A00E0);
|
||||
font-family: 'Merriweather Sans', sans-serif;
|
||||
border-radius: 7px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box:before{
|
||||
content: "";
|
||||
background: -webkit-repeating-linear-gradient(45deg,rgba(0, 0, 0, 0.1) 10px,
|
||||
transparent 10px,transparent 20px,rgba(0,0,0,0.1) 20px,rgba(0,0,0,0.1) 30px,
|
||||
transparent 30px,transparent 40px,rgba(0,0,0,0.1) 40px,rgba(0,0,0,0.1) 50px,
|
||||
transparent 50px,transparent 60px,rgba(0,0,0,0.1) 60px,rgba(0,0,0,0.1) 70px,
|
||||
transparent 70px,transparent 80px,rgba(0, 0,0, 0.1) 80px,
|
||||
rgba(0, 0,0, 0.1) 90px,transparent 90px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover:before{ opacity:1; }
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: all 0.5s ease;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
|
||||
}
|
||||
.box:hover img{
|
||||
opacity: 0.5;
|
||||
-webkit-clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
|
||||
}
|
||||
.box .box-content{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-55deg);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(0deg);
|
||||
}
|
||||
.box .title{
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 5px #000;
|
||||
margin: 0 0 3px 0;
|
||||
}
|
||||
.box .post{
|
||||
font-size: 16px;
|
||||
text-shadow: 0 0 5px #000;
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
transform: rotateX(180deg);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box:hover .icon{
|
||||
opacity: 1;
|
||||
transform: rotate(0);
|
||||
}
|
||||
.box .icon li a{
|
||||
color: #4A00E0;
|
||||
background-color: #fff;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 0 7px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all .5s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #8E2DE2;
|
||||
box-shadow: 0 0 15px #fff;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box { margin: 0 0 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
134
.vuepress/components/fancy-images/Rectangle.vue
Normal file
134
.vuepress/components/fancy-images/Rectangle.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" :alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.box:before,
|
||||
.box:after{
|
||||
content: '';
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box:after{ top: 100%; }
|
||||
.box:hover:before{
|
||||
transform: translateX(-50%) translateY(0);
|
||||
top: 0;
|
||||
}
|
||||
.box:hover:after{
|
||||
transform: translateX(-50%) translateY(0);
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.box:hover:before,
|
||||
.box:hover:after{
|
||||
height: 50%;
|
||||
opacity: 1;
|
||||
animation: animate 0.5s linear;
|
||||
}
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.box .box-content{
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.4s ease 0.1s;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
top: 50%;
|
||||
}
|
||||
.box .title{
|
||||
color: #4834d4;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
.box .post{
|
||||
color: #444;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease 0.3s;
|
||||
}
|
||||
.box:hover .icon{ opacity: 1; }
|
||||
.box .icon li{ display: inline-block; }
|
||||
.box .icon li a{
|
||||
color: #fff;
|
||||
background-color: #4834d4;
|
||||
line-height: 25px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 3px -3px 5px #555;
|
||||
display: block;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
color: #4834d4;
|
||||
background-color: #fff;
|
||||
border-color: #4834d4;
|
||||
}
|
||||
@keyframes animate{
|
||||
80%{ width: 90%; }
|
||||
85%{ width: 95%; }
|
||||
93%{ width: 85%; }
|
||||
100%{ width: 100%; }
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box{ margin-bottom: 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
125
.vuepress/components/fancy-images/Rolling.vue
Normal file
125
.vuepress/components/fancy-images/Rolling.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<img :src="src" alt="alt">
|
||||
<div class="box-content">
|
||||
<h3 class="title">{{title}}</h3>
|
||||
<span class="post">{{description}}</span>
|
||||
</div>
|
||||
<!-- <ul class="icon">
|
||||
<li><a href="#"><i class="fa fa-search"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-link"></i></a></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, required: true },
|
||||
alt: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
description: { type: String, required: true },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box:before{
|
||||
content: '';
|
||||
background: linear-gradient(45deg,rgba(103,178,111,0.9), rgba(76,162,205,0.6));
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
transform: scale(1) rotate(180deg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
.box:hover:before{
|
||||
box-shadow: 0 0 10px 2px #555;
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: scale(0.92, 0.9) rotate(0);
|
||||
}
|
||||
.box img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.box:hover img{ transform: scale(1.9) rotate(45deg); }
|
||||
.box .box-content{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-50%) scale(3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.box:hover .box-content{
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-50%) scale(1);
|
||||
}
|
||||
.box .title{
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
.box .post{
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.box .icon{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
filter: blur(10px);
|
||||
transform: scale(0);
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
z-index: 2;
|
||||
transition: all 0.5s ease 0.2s;
|
||||
}
|
||||
.box:hover .icon{
|
||||
transform: scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
.box .icon li{ display: inline-block; }
|
||||
.box .icon li a{
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.2);
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 0 3px;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.box .icon li a:hover{
|
||||
text-shadow: 0 0 6px #555;
|
||||
box-shadow: 0 0 5px #555;
|
||||
}
|
||||
@media only screen and (max-width:990px){
|
||||
.box{ margin-bottom: 30px; }
|
||||
}
|
||||
@media only screen and (max-width:479px){
|
||||
.box .title{ font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user