AlkantarClanX12
Your IP : 216.73.216.114
.hoverbox-blog-grid a.button {
color: #b6872d;
border: 1px solid #b6872d;
padding: 2px 15px;
opacity: 1;
z-index: 1009;
font-size: 10px;
letter-spacing: 3px;
text-decoration:none;
display:inline-block;
right: auto;
margin-right: auto;
margin-left: auto;
margin-top:25px;
transition: background-color 0.5s, color 0.75s;
}
.hoverbox-blog-grid {
overflow: hidden;
margin: 0 auto;
padding: 3em 0 0 0;
width: 100%;
list-style: none;
}
.hoverbox-blog-grid .one-full {
width: 100%;
float: left;
}
.hoverbox-blog-grid .one-half {
width: 50%;
float: left;
}
.hoverbox-blog-grid .one-forth {
width: 25%;
}
.hoverbox-blog-grid .three-forth {
width: 75%;
}
/* Common style */
.hoverbox-blog-grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: -0.135em 0;
/*width: 33.333%;*/
height: 200px;
background: silver;
cursor: pointer;
background-repeat:no-repeat;
background-size:cover;
background-position: center center;
}
.hoverbox-blog-grid .double-height {
height: 400px;
}
.hoverbox-blog-grid figure img {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
opacity:0;
}
.hoverbox-blog-grid figure figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
font-size: 16px;
backface-visibility: hidden;
transition: transform 0.35s;
}
.hoverbox-blog-grid figure figcaption div {
margin-top:40px;
}
.hoverbox-blog-grid figure figcaption div>span.cat {
position:relative;
font-size:10px !important;
line-height:16px !important;
text-transform:uppercase;
padding-left:20px;
}
.hoverbox-blog-grid figure figcaption div>span.cat:before {
content: '';
width:10px;
border-bottom: solid 2px currentColor;
position: absolute;
left: 0;
top:calc(50% - 1px);
z-index: 1;
}
.hoverbox-blog-grid figure figcaption p {
display:none;
}
.hoverbox-blog-grid figure.one-full figcaption p {
display:inherit;
}
.hoverbox-blog-grid figure figcaption::after {
content: '';
border-style: solid;
border-width: 20px;
position: absolute;
display: block;
width: 0;
height: 0;
}
.hoverbox-blog-grid figure figcaption::before,
.hoverbox-blog-grid figure figcaption::after {
pointer-events: none;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.hoverbox-blog-grid figure a.anchor {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.hoverbox-blog-grid figure h2 {
display: block;
z-index: 1002;
font-weight: 300;
margin: 0 auto;
float: none;
width: 100%;
top: 20%;
}
.hoverbox-blog-grid figure.double-height h2 {
top: 40%;
}
.hoverbox-blog-grid figure p {
opacity: 0;
letter-spacing: 1px;
z-index: 1001;
position:relative;
font-size: 80%;
text-transform: none;
backface-visibility: hidden;
transition: opacity 0.35s;
margin: 5px auto;
float: none;
width: 100%;
display: block;
right: auto;
left: auto;
padding-top:52px !important;
}
.hoverbox-blog-grid figure.double-height p {
top: 60%;
}
.hoverbox-blog-grid figure:hover p {
opacity: 1;
}
.hoverbox-blog-grid figure h2 {
transition: transform 0.35s;
}
.hoverbox-blog-grid figure:hover h2 {
transition-delay: 0.15s;
}
/*------------------*/
/***** Slide Up *****/
/*------------------*/
figure.effect-slideup figcaption {
top: auto;
bottom: 0;
transform: translate3d(0,200%,0);
}
figure.effect-slideup figcaption>div {
position: absolute;
top: 50%;
margin-top:0;
padding:0 70px;
transform: translateY(-50%);
}
figure.effect-slideup.double-height figcaption {
height: 50%;
}
@media screen and (min-width: 665px) {
figure.effect-slideup.double-height figcaption h2 {
font-size:20px !important;
line-height:26px !important;
}
}
figure.effect-slideup figcaption::after {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #ffffff;
border-left-color: transparent;
left: 45%;
top: -35px;
}
figure.effect-slideup h2 {
transform: translate3d(0,200%,0);
}
figure.effect-slideup:hover figcaption,
figure.effect-slideup:hover h2 {
transform: translate3d(0,0,0);
}
/*--------------------*/
/***** Slide Down *****/
/*--------------------*/
figure.effect-slidedown figcaption {
bottom: auto;
top: 0;
transform: translate3d(0,-200%,0);
text-align:center;
}
figure.effect-slidedown figcaption div {
position: absolute;
top: 50%;
width:100%;
margin-top:0;
padding:0 70px;
transform: translateY(-50%);
}
@media screen and (min-width: 665px) {
figure.effect-slidedown figcaption h2 {
font-size:20px !important;
line-height:26px !important;
}
}
figure.effect-slidedown.double-height figcaption {
height: 50%;
}
figure.effect-slidedown figcaption::after {
border-top-color: #ffffff;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
left: 45%;
bottom: -35px;
}
figure.effect-slidedown h2 {
transform: translate3d(0,-200%,0);
}
figure.effect-slidedown:hover figcaption,
figure.effect-slidedown:hover h2 {
transform: translate3d(0,0,0);
}
/*--------------------*/
/***** Slide Left *****/
/*--------------------*/
figure.effect-slideleft figcaption {
width: 50%;
transform: translate3d(-200%,0,0);
}
figure.effect-slideleft figcaption>div {
position: absolute;
top: 50%;
margin-top:0;
padding:0 40px;
transform: translateY(-50%);
}
figure.effect-slideleft.one-full figcaption>div {
padding:0 70px;
}
@media screen and (min-width: 665px) {
figure.effect-slideleft figcaption h2 {
font-size:16px !important;
line-height:22px !important;
}
figure.effect-slideleft.one-full figcaption h2 {
font-size:30px !important;
line-height:36px !important;
}
}
figure.effect-slideleft.one-full figcaption h2:after {
content: '';
width:60px;
border-bottom: solid 2px currentColor;
position: absolute;
left: 0;
bottom:-30px;
z-index: 1;
}
figure.effect-slideleft figcaption::after {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #ffffff;
right: -35px;
top: 45%;
}
figure.effect-slideleft h2 {
transform: translate3d(-200%,0,0);
}
figure.effect-slideleft:hover figcaption,
figure.effect-slideleft:hover h2 {
transform: translate3d(0,0,0);
}
/*--------------------*/
/***** Slide Right *****/
/*--------------------*/
figure.effect-slideright figcaption {
width: 50%;
transform: translate3d(210%,0,0);
}
figure.effect-slideright figcaption>div {
position: absolute;
top: 50%;
width:100%;
margin-top:0;
padding:0 40px;
transform: translateY(-50%);
text-align:right;
}
@media screen and (min-width: 665px) {
figure.effect-slideright figcaption h2 {
font-size:14px !important;
line-height:20px !important;
}
}
figure.effect-slideright figcaption::after {
border-top-color: transparent;
border-right-color: #ffffff;
border-bottom-color: transparent;
border-left-color: transparent;
left: -35px;
top: 45%;
}
figure.effect-slideright h2 {
transform: translate3d(200%,0,0);
}
figure.effect-slideright:hover figcaption {
transform: translate3d(100%,0,0);
}
figure.effect-slideright:hover h2 {
transform: translate3d(0,0,0);
}
/* MEDIA SCREEN SIZES */
@media screen and (max-width: 1200px) {
.hoverbox-blog-grid figure {
width: auto;
float: left;
}
.hoverbox-blog-grid figure img {
}
.hoverbox-blog-grid figure figcaption {
font-size: 90%;
}
}
@media screen and (max-width: 900px) {
.hoverbox-blog-grid figure {
width: 50%;
}
.hoverbox-blog-grid figure img {
min-width: 100%;
}
.hoverbox-blog-grid figure figcaption {
font-size: 90%;
}
}
@media screen and (max-width: 664px) {
.hoverbox-blog-grid .one-half {
width: 100%;
}
.hoverbox-blog-grid figure {
width: 100%;
}
figure figcaption {
position: relative !important;
top: auto !important;
width: 100% !important;
transform: none !important;
}
figure figcaption>div {
position: relative !important;
top: auto !important;
transform: none !important;
padding: 20px !important;
}
.hoverbox-blog-grid figure p {
opacity: 1 !important;
}
.hoverbox-blog-grid figure,
.hoverbox-blog-grid .double-height {
height: auto !important;
padding-top: 0 !important;
}
.hoverbox-blog-grid figure.double-height p {
top: auto !important;
padding: 0 !important;
}
.hoverbox-blog-grid figure img {
opacity: 1 !important;
}
figure h2 {
transform: none !important;
}
figure figcaption>div {
text-align: left !important;
}
}