File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less.lib/components/folio-gallery-hovers.less
/*
Created on : 12.11.2015, 16:51:47
Author : DFD
Styels for : Portfolio and Gallery Customizable Hovers
*/
.project,
.dfd-single-gallery,
.dfd-gallery-single-item,
.product .woo-title-wrap {
.dfd-folio-categories {
.byline.category {
.inline-block();
overflow: hidden;
margin-bottom: 10px;
a {
.link-style();
font-size: @link-font-size - 2;
float: left;
.block();
line-height: 1;
padding: 7px 15px;
color: @main-site-dark-color;
background: @third-site-light-color;
.transition(color .3s ease);
&:hover {
color: @box-name-color;
}
}
}
}
}
.my-product,
.project,
.dfd-gallery-single-item {
.entry-thumb {
.like-comments-style();
&.comments-like-hover {
.post-comments-wrap,
.post-like-wrap {
margin-top: -40px;
}
&:hover {
.post-comments-wrap,
.post-like-wrap {
margin-top: 0;
}
}
}
}
}
.project,
.dfd-gallery-single-item {
&.panr {
.entry-thumb {
img {
.transition(none !important);
}
}
}
&.portfolio-hover-style-1 {
.entry-thumb {
.portfolio-custom-hover {
width: 100%;
height: 100%;
}
}
}
&.dfd-fade-out {
.entry-thumb {
.portfolio-custom-hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
.opacity(0);
visibility: hidden;
.transition(~"opacity .3s ease .3s, visibility .3s ease .3s");
}
&:hover {
.portfolio-custom-hover {
.opacity(1);
visibility: visible;
.transition(~"opacity .3s ease, visibility .3s ease");
}
}
}
}
&.dfd-fade-offset {
.entry-thumb {
.portfolio-custom-hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
.opacity(0);
visibility: hidden;
.transition(~"left .3s ease .3s, right .3s ease .3s, top .3s ease .3s, bottom .3s ease .3s, opacity .3s ease .3s, visibility .3s ease .3s");
}
&:hover {
.portfolio-custom-hover {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
.opacity(1);
visibility: visible;
.transition(~"left .3s ease, right .3s ease, top .3s ease, bottom .3s ease, opacity .3s ease, visibility .3s ease");
}
}
}
}
&.dfd-left-to-right-shift {
.entry-thumb {
img {
.transform(translateX(0));
.transition-transform(.3s ease .3s);
}
&:hover {
img {
.transform(translateX(100%));
.transition-transform(.3s ease .3s);
}
}
}
}
&.dfd-left-to-right,
&.dfd-left-to-right-shift {
.entry-thumb {
.portfolio-custom-hover {
width: 100%;
height: 100%;
top: 0;
left: -100%;
.transition(left .3s ease .3s);
}
&:hover {
.portfolio-custom-hover {
left: 0;
.transition(left .3s ease .3s);
}
}
}
}
&.dfd-right-to-left-shift {
.entry-thumb {
img {
.transform(translateX(0));
.transition-transform(.3s ease .3s);
}
&:hover {
img {
.transform(translateX(-100%));
.transition-transform(.3s ease .3s);
}
}
}
}
&.dfd-right-to-left,
&.dfd-right-to-left-shift {
.entry-thumb {
.portfolio-custom-hover {
width: 100%;
height: 100%;
top: 0;
left: 100%;
.transition(left .3s ease .3s);
}
&:hover {
.portfolio-custom-hover {
left: 0;
.transition(left .3s ease .3s);
}
}
}
}
&.dfd-top-to-bottom-shift {
.entry-thumb {
img {
.transform(translateY(0));
.transition-transform(.3s ease .3s);
}
&:hover {
img {
.transform(translateY(100%));
.transition-transform(.3s ease .3s);
}
}
}
}
&.dfd-top-to-bottom,
&.dfd-top-to-bottom-shift {
.entry-thumb {
.portfolio-custom-hover {
width: 100%;
height: 100%;
left: 0;
top: -100%;
.transition(top .3s ease .3s);
}
&:hover {
.portfolio-custom-hover {
top: 0;
.transition(top .3s ease .3s);
}
}
}
}
&.dfd-bottom-to-top-shift {
.entry-thumb {
img {
.transform(translateY(0));
.transition-transform(.3s ease .3s);
}
&:hover {
img {
.transform(translateY(-100%));
.transition-transform(.3s ease .3s);
}
}
}
}
&.dfd-bottom-to-top,
&.dfd-bottom-to-top-shift {
.entry-thumb {
.portfolio-custom-hover {
width: 100%;
height: 100%;
left: 0;
top: 100%;
.transition(top .3s ease .3s);
}
&:hover {
.portfolio-custom-hover {
top: 0;
.transition(top .3s ease .3s);
}
}
}
}
&.dfd-rotate-left,
&.dfd-rotate-right,
&.dfd-rotate-top,
&.dfd-rotate-bottom {
.entry-thumb {
img {
.transition-tranform(.3s ease);
.backface-visibility(hidden);
}
img {
.transition(all .3s ease .3s);
}
.portfolio-custom-hover {
.backface-visibility(hidden);
}
}
}
&.dfd-rotate-content-up,
&.dfd-rotate-content-down,
&.dfd-rotate-left,
&.dfd-rotate-right,
&.dfd-rotate-top,
&.dfd-rotate-bottom {
.entry-thumb {
.portfolio-custom-hover {
width: 100%;
height: 100%;
left: 0;
top: 0;
.opacity(0);
visibility: hidden;
.transition(all .3s ease .3s);
}
&:hover {
img {
.transition(all .3s ease .3s);
}
.portfolio-custom-hover {
.opacity(1);
visibility: visible;
.transition(all .3s ease .3s);
}
}
}
}
&.dfd-rotate-content-up {
.entry-thumb {
.portfolio-custom-hover {
.transform(rotateX(180deg));
}
&:hover {
.portfolio-custom-hover {
.transform(rotateX(0));
}
}
}
}
&.dfd-rotate-content-down {
.entry-thumb {
.portfolio-custom-hover {
.transform(rotateX(-180deg));
}
&:hover {
.portfolio-custom-hover {
.transform(rotateX(0));
}
}
}
}
&.dfd-rotate-left {
.entry-thumb {
img {
.transform(rotateY(0));
}
.portfolio-custom-hover {
.transform(rotateY(180deg));
}
&:hover {
img {
.transform(rotateY(180deg));
}
.portfolio-custom-hover {
.transform(rotateY(0));
}
}
}
}
&.dfd-rotate-right {
.entry-thumb {
img {
.transform(rotateY(0));
}
.portfolio-custom-hover {
.transform(rotateY(-180deg));
}
&:hover {
img {
.transform(rotateY(-180deg));
}
.portfolio-custom-hover {
.transform(rotateY(0));
}
}
}
}
&.dfd-rotate-top {
.entry-thumb {
img {
.transform(rotateX(0));
}
.portfolio-custom-hover {
.transform(rotateX(180deg));
}
&:hover {
img {
.transform(rotateX(180deg));
}
.portfolio-custom-hover {
.transform(rotateX(0));
}
}
}
}
&.dfd-rotate-bottom {
.entry-thumb {
img {
.transform(rotateX(0));
}
.portfolio-custom-hover {
.transform(rotateX(-180deg));
}
&:hover {
img {
.transform(rotateX(-180deg));
}
.portfolio-custom-hover {
.transform(rotateX(0));
}
}
}
}
&.portfolio-hover-style-1,
&.dfd-left-to-right,
&.dfd-left-to-right-shift,
&.dfd-right-to-left,
&.dfd-right-to-left-shift,
&.dfd-top-to-bottom,
&.dfd-top-to-bottom-shift,
&.dfd-bottom-to-top,
&.dfd-bottom-to-top-shift,
&.dfd-rotate-content-up,
&.dfd-rotate-content-down,
&.dfd-rotate-left,
&.dfd-rotate-right,
&.dfd-rotate-top,
&.dfd-rotate-bottom {
.entry-thumb {
&:hover {
.portfolio-custom-hover {
.title-wrap {
&.diagonal-line {
&:before {
.transition-delay(.5s);
}
}
&.title-underline {
h6.widget-title {
&:before {
.transition-delay(.5s);
}
}
}
&.square-behind-heading {
&:before {
.transition-delay(.5s);
}
}
h6.widget-title {
.transition-delay(.5s);
}
h6.widget-sub-title {
.transition-delay(.5s);
}
}
.plus-link {
.transition-delay(.6s);
}
.dfd-dotted-link {
> span {
.transition-delay(.6s);
&.dfd-left-line {
.transition-delay(.5s);
}
&.dfd-right-line {
.transition-delay(.7s);
}
}
}
.dfd-dots-link {
span {
&.dfd-left-dot {
.transition-delay(.6s);
}
&.dfd-right-dot {
.transition-delay(.8s);
}
&.dfd-middle-dot {
.transition-delay(.7s);
}
}
}
.dfd-folio-icons-wrap {
> a {
&:first-child {
.transition-delay(.5s);
}
&:nth-child(2) {
.transition-delay(.6s);
}
&:last-child {
.transition-delay(.7s);
}
}
}
}
}
}
}
&.dfd-fade-out,
&.dfd-fade-offset,
&.dfd-left-to-right,
&.dfd-right-to-left,
&.dfd-top-to-bottom,
&.dfd-bottom-to-top,
&.dfd-rotate-content-up,
&.dfd-rotate-content-down {
&.dfd-image-scale {
.entry-thumb {
img {
.scale(1);
.transition-transform(.7s ease-in-out);
}
&:hover {
img {
.scale(1.06);
}
}
}
}
&.dfd-image-scale-rotate {
.entry-thumb {
img {
.transform(scale(1) rotate(0));
.transition-transform(.7s ease-in-out);
}
&:hover {
img {
.transform(scale(1.06) rotate(5deg));
}
}
}
}
&.dfd-image-shift-left {
.entry-thumb {
img {
.transform(scale(1.2) translateX(0));
.transition-transform(.7s ease-in-out);
}
&:hover {
img {
.transform(scale(1.2) translateX(-5%));
}
}
}
}
&.dfd-image-shift-right {
.entry-thumb {
img {
.transform(scale(1.2) translateX(0));
.transition-transform(.7s ease-in-out);
}
&:hover {
img {
.transform(scale(1.2) translateX(5%));
}
}
}
}
&.dfd-image-shift-top {
.entry-thumb {
img {
.transform(scale(1.2) translateY(0));
.transition-transform(.7s ease-in-out);
}
&:hover {
img {
.transform(scale(1.2) translateY(-5%));
}
}
}
}
&.dfd-image-shift-bottom {
.entry-thumb {
img {
.transform(scale(1.2) translateY(0));
.transition-transform(.7s ease-in-out);
}
&:hover {
img {
.transform(scale(1.2) translateY(5%));
}
}
}
}
&.dfd-image-blur {
.entry-thumb {
img {
.blur(0);
.transition(all .7s ease-in-out);
}
&:hover {
img {
.blur(5px);
}
}
}
}
&.grow-grayscale {
.entry-thumb {
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
.transition(all .5s ease-in-out);
.transform(scale(1));
}
}
&:hover {
.entry-thumb {
img {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
.transform(scale(1.05));
}
}
}
}
}
.entry-thumb {
.portfolio-custom-hover {
.abs();
text-align: center;
.title-wrap {
.block();
width: 100%;
.abs();
left: 0;
top: 50%;
padding: 0 20px;
.transform(translateY(-50%));
h6.widget-title {
margin-bottom: 0;
margin-left: -50px;
.opacity(.4);
.transition(~"margin-left .6s ease, opacity .6s ease");
a {
color: inherit;
}
}
h6.widget-sub-title {
margin-right: -50px;
.opacity(.4);
.transition(~"margin-right .4s ease, opacity .4s ease");
}
&.diagonal-line {
&:before {
content: "";
.block();
height: 0;
.abs();
top: 50%;
left: 15%;
right: 15%;
z-index: -1;
.transform(rotate(-45deg) scaleX(.1));
.transition-transform(.6s ease);
}
}
&.title-underline {
h6.widget-title {
.rel();
&:before {
content: "";
.block();
height: 0;
.abs();
top: 100%;
left: 15%;
right: 15%;
margin-top: 10px;
z-index: -1;
.scale(.1);
.transition-transform(.6s ease);
}
+ h6.widget-sub-title {
margin-top: 20px;
}
}
}
&.square-behind-heading {
&:before {
@s: 100px;
content: "";
.block();
width: @s;
height: @s;
.abs();
top: 50%;
left: 50%;
margin-top: -@s / 2;
margin-left: -@s / 2;
z-index: -1;
.scale(.1);
.transition-transform(.6s ease);
}
}
}
.dfd-folio-icons-wrap {
.abs();
left: 0;
bottom: 30px;
width: 100%;
> a {
.rel();
top: 15px;
margin: 0 5%;
.opacity(0);
&:after {
@s: 50px;
content: "";
.abs();
top: 50%;
left: 50%;
.block();
width: @s;
height: @s;
line-height: @s;
margin-top: -@s / 2;
margin-left: -@s / 2;
.rounded(50%);
.scale(0);
.transition-transform(.3s ease);
}
&:hover {
&:after {
.scale(1);
}
}
&.dfd-icon-down_right {
font-size: 16px;
}
&.dfd-icon-full_screen {
font-size: 14px;
}
&.dfd-icon-image {
font-size: 15px;
//top: 13px;
&:before {
.rel();
//top: -2px;
}
}
&:first-child {
.transition(~"top .3s ease .1s, opacity .3s ease .1s");
}
&:nth-child(2) {
.transition(~"top .3s ease .2s, opacity .3s ease .2s");
}
&:last-child {
.transition(~"top .3s ease .3s, opacity .3s ease .3s");
}
}
}
.plus-link {
@s: 140px;
@bs: 66px;
.abs();
top: 50%;
left: 50%;
.block();
width: @s;
height: @s;
margin-top: -@s / 2;
margin-left: -@s / 2;
//.folio-plus-link(160px, 10px, 1px, 80px);
.scale(.1);
.transition-transform(.6s ease);
.plus-link-container {
border: none !important;
}
&.dfd-top-right,
&.dfd-top-left,
&.dfd-bottom-right,
&.dfd-bottom-left {
width: @bs;
height: @bs;
margin-top: 0;
margin-left: 0;
z-index: 3;
&:before {
content: "";
.block();
.abs();
top: 0;
}
.plus-link-container {
width: 16px;
height: 16px;
overflow: hidden;
border: none !important;
}
}
&.dfd-top-right {
top: 0;
left: auto;
right: 0;
.transform-origin(100% 0);
&:before {
right: 0;
//border-top: @bs solid @third-site-light-color;
border-right: @bs solid @third-site-light-color;
border-bottom: @bs solid transparent;
border-left: @bs solid transparent;
}
.plus-link-container {
left: auto !important;
bottom: auto !important;
top: 10px !important;
right: 10px !important;
}
}
&.dfd-top-left {
top: 0;
left: 0;
.transform-origin(0 0);
&:before {
left: 0;
//border-top: @bs solid @third-site-light-color;
border-left: @bs solid @third-site-light-color;
border-bottom: @bs solid transparent;
border-right: @bs solid transparent;
}
.plus-link-container {
left: 10px !important;
bottom: auto !important;
top: 10px !important;
right: auto !important;
}
}
&.dfd-bottom-right {
top: auto;
left: auto;
right: 0;
bottom: 0;
.transform-origin(100% 100%);
&:before {
right: 0;
//border-bottom: @bs solid @third-site-light-color;
border-right: @bs solid @third-site-light-color;
border-top: @bs solid transparent;
border-left: @bs solid transparent;
}
.plus-link-container {
left: auto !important;
bottom: 10px !important;
top: auto !important;
right: 10px !important;
}
}
&.dfd-bottom-left {
top: auto;
bottom: 0;
left: 0;
.transform-origin(0 100%);
&:before {
left: 0;
//border-bottom: @bs solid @third-site-light-color;
border-left: @bs solid @third-site-light-color;
border-top: @bs solid transparent;
border-right: @bs solid transparent;
}
.plus-link-container {
left: 10px !important;
bottom: 10px !important;
top: auto !important;
right: auto !important;
}
}
}
.dfd-dotted-link {
@w: 110px;
@h: 30px;
@lh: 2px;
@s: 30px;
top: 50%;
width: @w;
height: @h;
margin-left: -@w / 2;
margin-top: -@h / 2;
> span {
top: 14px;
width: @s;
height: @lh;
margin-left: 0;
.opacity(0);
.transition(~"margin-left .2s ease .2s, opacity .2s ease .1s");
&.dfd-left-line {
margin-left: @s / 2;
.transition(~"margin-left .2s ease .3s, opacity .2s ease .2s");
}
&.dfd-right-line {
margin-right: -@s / 2;
.transition(~"margin-right .2s ease .1s, opacity .2s ease 0s");
}
}
}
.dfd-dots-link {
span {
margin-top: 10px;
&.dfd-left-dot {
.transition(margin-top .3s ease .1s);
}
&.dfd-right-dot {
.transition(margin-top .3s ease .3s);
}
&.dfd-middle-dot {
.transition(margin-top .3s ease .2s);
}
}
&:hover {
.dfd-left-dot {
-webkit-animation: dfdFolioHoverDots .3s 0s linear;
-moz-animation: dfdFolioHoverDots .3s 0s linear;
-o-animation: dfdFolioHoverDots .3s 0s linear;
-ms-animation: dfdFolioHoverDots .3s 0s linear;
animation: dfdFolioHoverDots .3s 0s linear;
}
.dfd-middle-dot {
-webkit-animation: dfdFolioHoverDots .3s .1s linear;
-moz-animation: dfdFolioHoverDots .3s .1s linear;
-o-animation: dfdFolioHoverDots .3s .1s linear;
-ms-animation: dfdFolioHoverDots .3s .1s linear;
animation: dfdFolioHoverDots .3s .1s linear;
}
.dfd-right-dot {
-webkit-animation: dfdFolioHoverDots .3s .2s linear;
-moz-animation: dfdFolioHoverDots .3s .2s linear;
-o-animation: dfdFolioHoverDots .3s .2s linear;
-ms-animation: dfdFolioHoverDots .3s .2s linear;
animation: dfdFolioHoverDots .3s .2s linear;
}
}
}
}
&:hover {
.portfolio-custom-hover {
.title-wrap {
&.diagonal-line {
&:before {
.transform(rotate(-45deg) scaleX(1));
}
}
&.title-underline {
h6.widget-title {
&:before {
.scale(1);
}
}
}
&.square-behind-heading {
&:before {
.scale(1);
}
}
h6.widget-title {
margin-left: 0;
.opacity(1);
}
h6.widget-sub-title {
margin-right: 0;
.opacity(1);
}
}
.plus-link {
.scale(1);
.transition-transform(.3s ease .1s);
}
.dfd-dotted-link {
@s: 30px;
> span {
margin-left: -@s / 2;
.opacity(1);
.transition(~"margin-left .3s ease .2s, opacity .3s ease .2s");
&.dfd-left-line {
margin-left: 0;
.transition(~"margin-left .3s ease .1s, opacity .3s ease .1s");
}
&.dfd-right-line {
margin-right: 0;
.transition(~"margin-right .3s ease .3s, opacity .3s ease .3s");
}
}
}
.dfd-dots-link {
span {
margin-top: 0;
}
}
.dfd-folio-icons-wrap {
> a {
top: 0;
.opacity(.5);
&:hover {
.opacity(1);
}
}
}
}
}
}
}