File: /var/www/iq22073873/data/www/bckln.ru/wp-content/themes/dt-the7/css/static-less/hover-layouts.less
/* #Hover layouts
================================================== */
.content-align-centre,
.content-align-bottom {
text-align: center;
}
.rollover-project {
position: relative;
overflow: hidden;
}
.post .rollover-project.alignnone {
margin-bottom: 0;
}
.rollover-content {
position: absolute;
top: 0;
left: 0;
z-index: 100;
display: none;
.mobile-true .hover-style-two:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) & {
display: none;
}
width: 100%;
height: 100%;
padding: 10px 25px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: opacity 400ms ease;
transition: opacity 400ms ease;
&:hover {
cursor: pointer;
}
}
.mobile-false .rollover-content {
display: block;
opacity: 0;
}
.mobile-false .rollover-project:hover .rollover-content,
.mobile-false .buttons-on-img:hover .rollover-content {
opacity: 1;
}
.hover-grid .rollover-content,
.mobile-false .text-on-img.hover-grid .fs-entry {
overflow: hidden;
}
.mobile-true .rollover-content.hide-content,
.mobile-true .fs-entry i {
display: none;
}
.mobile-true .albums .rollover-content,
.mobile-true .media .rollover-content,
.mobile-true .buttons-on-img .rollover-content {
opacity: 0;
}
.mobile-true .is-clicked .rollover-thumbnails,
.mobile-true .is-clicked.rollover-content,
.mobile-true .is-clicked .buttons-on-img i {
visibility: visible !important;
opacity: 1 !important;
}
/*Always show description*/
.always-show-info .rollover-content,
.always-show-info .rollover-content-container {
display: block;
opacity: 1 !important;
}
.rollover-content-container {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*Show icons*/
.links-container {
position: relative;
line-height: 0 !important;
font-size: 0 !important;
text-align: center;
.small-portfolio-icons .buttons-on-img &,
.small-portfolio-icons .wf-container:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) &,
.content-align-left-bottom.hover-style-two &,
.content-align-left.hover-style-one &,
.content-align-left.hover-style-three & {
position: absolute;
display: block;
top: 15px;
right: 15px;
text-align: right;
}
.small-portfolio-icons #page .effect-layla &,
.small-portfolio-icons #page .effect-bubba &,
.small-portfolio-icons #page .effect-sarah & {
position: relative;
display: block;
top: 0;
right: auto;
width: 100%;
text-align: center;
}
.small-portfolio-icons #page .effect-sarah & {
text-align: left;
}
.small-portfolio-icons .buttons-on-img &,
.small-portfolio-icons .wf-container:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) & {
right: 10px;
}
.small-portfolio-icons .content-align-left-top.hover-style-two:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) & {
top: auto;
bottom: 15px;
}
.content-align-left-top.hover-style-two & {
position: absolute;
display: block;
bottom: 15px;
right: 15px;
text-align: right;
}
.semitransparent-portfolio-icons .buttons-on-img &,
.accent-portfolio-icons .buttons-on-img &,
.outlined-portfolio-icons .buttons-on-img & {
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.effect-layla &,
.effect-bubba &,
.effect-sarah & {
margin-top: 10px;
}
}
.mobile-true .links-container {
visibility: hidden;
}
.mobile-true .is-clicked .links-container,
.mobile-true .effect-layla.always-show-info .links-container,
.mobile-true .effect-bubba.always-show-info .links-container,
.mobile-true .effect-sarah.always-show-info .links-container {
visibility: visible;
}
.mobile-true .hover-style-two:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) .is-clicked .links-container {
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
.links-container > a {
position: relative;
display: inline-block;
width: 44px;
height: 44px;
margin: 5px 5px;
text-indent: -9999px;
line-height: 0;
font-size: 0 !important;
background-image: none;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
.effect-sarah & {
margin: 5px 10px 5px 0;
}
.small-portfolio-icons & {
width: 26px;
height: 26px;
margin-top: 1px;
&:hover {
opacity: 0.8;
}
}
.semitransparent-portfolio-icons & {
background-color: rgba(255, 255, 255, 0.35);
}
}
.buttons-on-img .links-container > a,
.hover-style-two:not(.hover-color-static) .links-container > a {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.links-container > a:after,
.outlined-portfolio-icons .links-container > a:before {
display: block;
width: 100%;
height: 100%;
content: "";
background-position: center center;
background-repeat: no-repeat;
}
.links-container > a:after,
.links-container > a:before {
.outlined-portfolio-icons & {
position: absolute;
top: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
}
}
.outlined-portfolio-icons .links-container > a:before,
.outlined-portfolio-icons .links-container > a:hover:after {
opacity: 0;
}
.links-container > a:hover:before {
.outlined-portfolio-icons & {
opacity: 1;
}
}
.links-container .project-details {
.outlined-portfolio-icons & {
&:after {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpolygon fill='white' points='30,21 23,21 23,14 21,14 21,21 14,21 14,23 21,23 21,30 23,30 23,23 30,23 '/%3E %3Cpath id='flashlight-12' fill='white' d='M22,2c11.027,0,20,8.972,20,20c0,11.027-8.973,20-20,20S2,33.027,2,22C2,10.972,10.973,2,22,2z M22,0C9.851,0,0,9.85,0,22c0,12.149,9.851,22,22,22s22-9.851,22-22C44,9.85,34.149,0,22,0z'/%3E%3C/svg%3E");
}
&:before {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpath fill='white' d='M22,0C9.851,0,0,9.85,0,22c0,12.149,9.851,22,22,22s22-9.851,22-22C44,9.85,34.149,0,22,0z M30,23h-7v7h-2v-7h-7v-2h7v-7h2v7h7V23z'/%3E%3C/svg%3E");
}
}
.semitransparent-portfolio-icons &,
.accent-portfolio-icons &,
.small-portfolio-icons & {
&:after {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpolygon fill='white' points='30,21 23,21 23,14 21,14 21,21 14,21 14,23 21,23 21,30 23,30 23,23 30,23 '/%3E%3C/svg%3E");
}
}
}
.project-zoom {
.outlined-portfolio-icons & {
&:after {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpath fill='white' d='M22,2c11.027,0,20,8.972,20,20c0,11.027-8.973,20-20,20S2,33.027,2,22C2,10.972,10.973,2,22,2z M22,0C9.851,0,0,9.85,0,22c0,12.149,9.851,22,22,22s22-9.851,22-22C44,9.85,34.149,0,22,0z'/%3E%3Cpolygon fill='white' points='28,13.99 28,14.01 22.993,14.01 22.993,16.01 28,16.01 28,20.99 30,20.99 30,13.99 '/%3E%3Cpolygon fill='white' points='16,23.01 14,23.01 14,30.01 16,30.01 16,29.99 21.07,29.99 21.007,27.99 16,27.99 '/%3E%3C/svg%3E");
}
&:before {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpath fill='white' d='M22,0C9.851,0,0,9.85,0,22c0,12.149,9.851,22,22,22s22-9.851,22-22C44,9.85,34.149,0,22,0z M21.007,29.99H16v0.02h-2v-7h2v4.98h5.007V29.99z M30,20.99h-2v-4.98h-5.007v-2H28v-0.02h2V20.99z'/%3E%3C/svg%3E");
}
}
.semitransparent-portfolio-icons &,
.accent-portfolio-icons &,
.small-portfolio-icons & {
&:after {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpolygon fill='white' points='28,13.99 28,14.01 22.993,14.01 22.993,16.01 28,16.01 28,20.99 30,20.99 30,13.99 '/%3E%3Cpolygon fill='white' points='16,23.01 14,23.01 14,30.01 16,30.01 16,29.99 21.007,29.99 21.007,27.99 16,27.99 '/%3E%3C/svg%3E");
}
}
}
.project-link:after {
.outlined-portfolio-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpath fill='white' d='M22,2c11.027,0,20,8.972,20,20c0,11.027-8.973,20-20,20S2,33.027,2,22C2,10.972,10.973,2,22,2z M22,0C9.851,0,0,9.85,0,22c0,12.149,9.851,22,22,22s22-9.851,22-22C44,9.85,34.149,0,22,0z'/%3E%3Cpolygon fill='white' points='28,28.01 16,28.01 16,16.01 19.011,16.01 19.011,14.01 16,14.01 14.011,14.01 14,14.01 14,28.01 14,30.01 16,30.01 30,30.01 30,29.999 30,28.01 30,24.999 28,24.999 '/%3E%3Cpolygon fill='white' points='28,13.99 28,14.01 22.993,14.01 22.993,16.01 26.637,16.01 20.5,22.146 21.863,23.51 28,17.374 28,20.99 30,20.99 30,13.99 '/%3E%3C/svg%3E");
}
.semitransparent-portfolio-icons &,
.accent-portfolio-icons &,
.small-portfolio-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpolygon fill='white' points='28,28.01 16,28.01 16,16.01 19.011,16.01 19.011,14.01 16,14.01 14.011,14.01 14,14.01 14,28.01 14,30.01 16,30.01 30,30.01 30,29.999 30,28.01 30,24.999 28,24.999 '/%3E%3Cpolygon fill='white' points='28,13.99 28,14.01 22.993,14.01 22.993,16.01 26.637,16.01 20.5,22.146 21.863,23.51 28,17.374 28,20.99 30,20.99 30,13.99 '/%3E%3C/svg%3E");
}
}
.project-link:before {
.outlined-portfolio-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpath fill='white' d='M22,0C9.851,0,0,9.85,0,22c0,12.149,9.851,22,22,22s22-9.851,22-22C44,9.85,34.149,0,22,0z M30,28.01v1.989v0.011H16h-2v-2v-14h0.011H16h3.011v2H16v12h12v-3.011h2V28.01z M30,20.99h-2v-3.616l-6.137,6.136L20.5,22.146l6.137-6.137h-3.644v-2H28v-0.02h2V20.99z'/%3E%3C/svg%3E");
}
}
.links-container a > span {
display:block;
position:absolute;
width:100%;
height:100%;
left:-2px;
top:-2px;
border: 2px solid rgba(255, 255, 255, 0.38);
opacity:1;
visibility:hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.mobile-false .semitransparent-portfolio-icons .links-container > a .icon-hover,
.mobile-false .accent-portfolio-icons .links-container > a .icon-hover {
visibility:visible;
opacity:0;
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.cs-style-3 .rollover-content-wrap:before,
.description-under-image .links-container:before,
.description-under-image .links-container:after,
.links-container:after,
.links-container:before {
content: "";
display: table;
clear: both;
}
.rollover-content .entry-title a {
#page & {
background: none;
}
}
.links-hovers-disabled .rollover-content .entry-title a:hover {
background: none;
-webkit-background-clip: text;
-webkit-text-fill-color: #fff;
}
.rollover-content,
.rollover-content *,
.rollover-content h3.entry-title,
.rollover-content h3.entry-title a,
.post .rollover-content h4.entry-title a:hover,
.post .rollover-content .entry-title a:hover,
.rollover-content a:hover,
.post .rollover-content h3.entry-title a:hover,
.hover-style-one h2.entry-title,
.hover-style-two h2.entry-title {
#page &,
#page .stripe & {
color: #fff;
-webkit-text-fill-color: #fff;
}
}
.rollover-content h3.entry-title,
.rollover-content .entry-title a,
.post .rollover-content .entry-title a:hover,
.hover-style-one h2.entry-title,
.hover-style-two h2.entry-title,
.hover-style-two h4.entry-title {
#page &,
#page .stripe & {
background: none;
}
}
.hover-grid .rollover-content {
-webkit-transition: none;
transition: none;
}
/* #Under images
================================================== */
.buttons-on-img {
position: relative;
overflow: hidden;
margin: 0 0 20px;
text-align: center;
}
.bg-on .buttons-on-img {
margin: 0;
}
.layout-list .buttons-on-img {
margin: 0 30px 25px 0;
}
.layout-list .project-even .buttons-on-img {
margin: 0 0 25px 30px;
}
.layout-list .media-wide .buttons-on-img {
margin-right: 0;
margin-left: 0;
}
.buttons-on-img > p,
.post .buttons-on-img .alignnone,
.description-under-image .post .buttons-on-img .alignnone {
margin-bottom: 0;
}
.post .buttons-on-img .alignleft {
margin: 0;
}
.buttons-on-img > .rollover-content {
padding: 0;
.mobile-true & {
display: block;
}
}
.rollover .rollover-thumbnails {
opacity: 0;
}
.mobile-false .rollover:hover .rollover-thumbnails,
.mobile-true .rollover.is-clicked .rollover-thumbnails {
opacity: 1;
}
/* # On colored background
================================================== */
.rollover-content.is-clicked {
.mobile-true .hover-style-two:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) & {
.flex-display(@display: flex);
.flex-wrap(@wrap: wrap);
}
}
.rollover-content {
.hover-style-two & {
.flex-display(@display: flex);
.flex-wrap(@wrap: wrap);
}
.content-align-bottom.hover-style-two & {
.align-content(@align: flex-end);
.ie-flex-align-content(flex-end);
.justify-content(@justify: center);
.ie-flex-justify-content(center);
.align-items(@align: flex-end);
.ie-flex-align-items(flex-end);
}
.content-align-centre.hover-style-two & {
.align-content(@align: center);
.ie-flex-align-content(center);
.justify-content(@justify: center);
.ie-flex-justify-content(center);
.align-items(@align: center);
.ie-flex-align-items(center);
}
.content-align-left-bottom.hover-style-two & {
.align-content(@align: flex-end);
.ie-flex-align-content(flex-end);
.align-items(@align: flex-end);
.ie-flex-align-items(flex-end);
}
.content-align-left-top.hover-style-two & {
.align-content(@align: flex-start);
.ie-flex-align-content(flex-start);
.align-items(@align: flex-start);
.ie-flex-align-items(flex-start);
}
}
.hover-style-two .rollover-content-container {
margin-top: 10px;
width: 100%;
}
/* #Direction aware
-------------------------------------------------- */
.mobile-true .hover-grid .rollover-content,
.mobile-true .hover-grid-reverse .rollover-content,
.mobile-true .hover-scale .rollover-content {
/*display: block !important;*/
top: 0 !important;
left: 0 !important;
opacity: 0;
}
.mobile-true .hover-grid .is-clicked .rollover-content,
.mobile-true .hover-grid-reverse .is-clicked .rollover-content,
.mobile-true .hover-scale .is-clicked .rollover-content {
opacity: 1;
}
/* #Scale In
-------------------------------------------------- */
.mobile-false .hover-scale .rollover-content {
background: none;
}
.hover-scale .rollover-project:after {
background-color: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
content: "";
border-radius: 50%;
padding-bottom: 100%;
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s;
transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s;
}
.hover-scale .ratio-2.rollover-project:after {
top: -50%;
}
.hover-scale .ratio_3-2.rollover-project:after {
top: -25%;
}
.hover-scale .ratio_4-3.rollover-project:after {
top: -16.6666%;
}
.hover-scale .ratio_2-3.rollover-project:after {
top: 16.6666%;
}
.hover-scale .ratio_3-4.rollover-project:after {
top: 14.5%;
}
.mobile-false .hover-scale .rollover-project:hover:after {
opacity: 1;
-ms-transform: scale(1.42);
-webkit-transform: scale(1.42);
transform: scale(1.42);
}
.mobile-false .hover-scale .ratio_3-2.rollover-project:hover:after {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.mobile-false .hover-scale .ratio_4-3.rollover-project:hover:after {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.mobile-false .hover-scale .ratio_3-4.rollover-project:hover:after {
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
.mobile-false .hover-scale .ratio_2-3.rollover-project:hover:after {
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
.mobile-false .hover-scale .rollover-content {
background: none !important;
background-color: transparent;
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-ms-transition: -ms-transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
-webkit-transition: -webkit-transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
}
.mobile-false .hover-scale .rollover-project:hover .rollover-content {
opacity: 1;
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
/* #On dark gradient
================================================== */
.hover-style-one .rollover-content,
.accent-gradient .hover-style-one .rollover-content {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), rgba(0,0,0,0.1) 50%,color-stop(100%,rgba(0,0,0,0.6))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.6) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.6) 100%); /* W3C */
background-color: transparent !important;
color: #fff;
}
.rollover-content {
.hover-style-one & {
.flex-display(@display: flex);
.flex-wrap(@wrap: wrap);
}
.content-align-centre.hover-style-one & {
.align-content(@align: flex-end);
.ie-flex-align-content(flex-end);
.justify-content(@justify: center);
.ie-flex-justify-content(center);
.align-items(@align: flex-end);
.ie-flex-align-items(flex-end);
}
.content-align-left.hover-style-one & {
.align-content(@align: flex-end);
.ie-flex-align-content(flex-end);
.align-items(@align: flex-end);
.ie-flex-align-items(flex-end);
}
}
.hover-style-one .rollover-project > a:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-color: rgba(0, 0, 0, 0.2);
opacity: 0;
}
.mobile-false .hover-style-one .rollover-project:hover > a:after {
opacity: 1;
}
.hover-style-one .rollover-content-container {
margin-top: 10px;
width: 100%;
}
.links-container,
.rollover-thumbnails {
.hover-style-one.always-show-info & {
opacity: 0;
}
.hover-style-one.always-show-info .rollover-project:hover & {
opacity: 1;
}
}
/* #In the bottom
================================================== */
.cs-style-3 .rollover-project .rollover-content {
opacity: 1;
}
.rollover-content {
.cs-style-3 & {
padding: 0;
}
.cs-style-3.content-align-centre & {
.flex-display(@display: flex);
.flex-wrap(@wrap: wrap);
.align-content(@align: flex-end);
.ie-flex-align-content(flex-end);
.justify-content(@justify: center);
.ie-flex-justify-content(center);
.align-items(@align: flex-end);
.ie-flex-align-items(flex-end);
}
}
.cs-style-3 .rollover-project > a {
position: relative;
display: block;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.mobile-false .cs-style-3 .rollover-project:hover > a {
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.hover-style-three .rollover-project > a:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-color: rgba(0, 0, 0, 0.2);
opacity: 0;
}
.mobile-false .hover-style-three .rollover-project:hover > a:after,
.mobile-true .hover-style-three .rollover-project.is-clicked > a:after {
opacity: 1;
}
.mobile-false .scale-on-hover .hover-style-three a.rollover:hover > img {
-webkit-transform: none;
transform: none;
}
.rollover-content-container {
.cs-style-3.content-align-left & {
position: absolute;
bottom: 0;
}
.cs-style-3 & {
width: 100%;
padding: 15px 20px 5px;
background-color: #1e1e1e;
}
}
.mobile-false .cs-style-3 .rollover-content-container {
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
-ms-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.cs-style-3 .rollover-project:hover .rollover-content-container,
.mobile-false .cs-style-3 .fs-entry:hover .rollover-content-container,
.mobile-true .cs-style-3 .is-clicked .rollover-content-container,
.mobile-true .cs-style-3 .fs-entry .rollover-content-container {
opacity: 1;
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transition: -ms-transform 0.4s, opacity 0.1s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.mobile-true .cs-style-3 .is-clicked .rollover-content {
display: block;
}
.rollover-content {
.mobile-true .cs-style-3.content-align-centre & {
display: none;
}
}
.rollover-content.is-clicked {
.cs-style-3.content-align-centre & {
.flex-display(@display: flex);
}
}
.cs-style-3 .rollover-thumbnails {
opacity: 0;
margin-bottom: 20px;
}
.mobile-false .cs-style-3 .links-container {
opacity: 0;
}
.cs-style-3 .links-container {
margin-bottom: 15px;
}
.mobile-false .cs-style-3 .rollover-project:hover .links-container,
.mobile-false .cs-style-3 .rollover-project:hover .rollover-thumbnails,
.mobile-false .cs-style-3 .fs-entry:hover .links-container {
opacity: 1;
}
.mobile-false .cs-style-3 .links-container,
.cs-style-3 .rollover-project .rollover-thumbnails {
-webkit-transition: opacity 400ms ease;
transition: opacity 400ms ease;
}
.mobile-true .cs-style-3 .links-container {
-webkit-transition: opacity 0.1s 0.3s;
transition: opacity 0.1s 0.3s;
}
.cs-style-3 .rollover-content * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
.accent-gradient .cs-style-3 .rollover-content .entry-title a {
-webkit-backface-visibility: hidden;
background-image: none;
}
/* #Background & animated lines
================================================== */
/*---------------*/
/***** Layla *****/
/*---------------*/
.wf-container.effect-layla:not(.jg-container) .rollover-project > a > img {
.mobile-false & {
position: absolute;
left: 0;
top: 50%;
width: calc(~'100% + 40px');
max-width: calc(~'100% + 40px');
}
.filter-grayscale &,
.filter-grayscale-static & {
top: 0;
width: 100%;
max-width: 100%;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
.effect-layla .rollover-content {
display: block;
padding: 35px 45px;
opacity: 1;
text-align: center;
&:hover {
padding: 35px 45px;
}
}
.effect-layla .rollover-content:before,
.effect-layla .rollover-content:after {
position: absolute;
content: '';
opacity: 0;
}
.effect-layla .rollover-content:before {
top: 25px;
right: 15px;
bottom: 25px;
left: 15px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-ms-transform: scale(0,1);
-webkit-transform: scale(0,1);
transform: scale(0,1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.effect-layla .rollover-content:after {
top: 15px;
right: 25px;
bottom: 15px;
left: 25px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-ms-transform: scale(1,0);
-webkit-transform: scale(1,0);
transform: scale(1,0);
-ms-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.effect-layla .entry-title,
.effect-layla .links-container,
.effect-layla .rollover-thumbnails {
-ms-transition: -ms-transform 0.35s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.effect-layla:not(.always-show-info) .entry-title,
.effect-layla:not(.always-show-info) .links-container,
.effect-layla:not(.always-show-info) .rollover-thumbnails {
opacity: 0;
-ms-transition: -ms-transform 0.35s, opacity 0.35s;
-webkit-transition: -webkit-transform 0.35s, opacity 0.35s;
transition: transform 0.35s, opacity 0.35s;
}
.effect-layla p,
.effect-layla .entry-meta {
opacity: 0;
-webkit-transform: translate3d(0,-15px,0);
transform: translate3d(0,-15px,0);
}
.entry-title,
.links-container,
.rollover-thumbnails {
.effect-layla & {
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
.always-show-info.effect-layla & {
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
}
.mobile-false .effect-layla:not(.jg-container):not(.slider-wrapper) .rollover-project > a > img {
-webkit-transform: translate3d(-20px,-50%,0);
transform: translate3d(-20px,-50%,0);
}
.effect-layla .rollover-project > a > img,
.effect-layla .rollover-content:before,
.effect-layla .rollover-content:after,
.effect-layla p,
.effect-layla .entry-meta {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.effect-layla .links-container,
.effect-layla .entry-meta {
position: relative;
z-index: 10;
}
> a > img {
.mobile-false .effect-layla:not(.jg-container):not(.slider-wrapper) .rollover-project:hover & {
-webkit-transform: translate3d(-20px, calc(~'-50% + 10px'), 0);
transform: translate3d(-20px, calc(~'-50% + 10px'), 0);
}
.mobile-true .filter-grayscale .effect-layla:not(.jg-container):not(.slider-wrapper) .rollover-project.is-clicked &,
.mobile-true .filter-grayscale-static .effect-layla:not(.jg-container):not(.slider-wrapper) .rollover-project.is-clicked &,
.mobile-true .effect-layla:not(.jg-container):not(.slider-wrapper) .rollover-project.is-clicked & {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
> a > img {
.mobile-false .effect-layla.hover-color-static .rollover-project:hover &,
.mobile-true .effect-layla.hover-color-static .rollover-project.is-clicked & {
opacity: 0.3;
}
}
figcaption::before,
figcaption::after {
.mobile-false.mobile-false .effect-layla .rollover-project:hover &,
.mobile-true.mobile-true .effect-layla .rollover-project.is-clicked & {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.entry-title,
p,
.entry-meta,
.links-container,
.rollover-thumbnails {
.mobile-false.mobile-false .effect-layla .rollover-project:hover &,
.mobile-true.mobile-true .effect-layla .rollover-project.is-clicked & {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
.rollover-content:after,
.entry-title,
.links-container,
.rollover-thumbnails,
p,
a > img,
.entry-meta {
.mobile-false.mobile-false .effect-layla .rollover-project:hover &,
.mobile-true.mobile-true .effect-layla .rollover-project.is-clicked & {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
}
/*---------------*/
/***** Bubba *****/
/*---------------*/
.rollover-project > a > img {
.effect-bubba & {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
}
.mobile-false .effect-bubba.hover-color-static .rollover-project:hover > a > img,
.mobile-true .effect-bubba.hover-color-static .rollover-project.is-clicked > a > img,
.mobile-false.effect-bubba.hover-color-static .rollover-project:hover > a > .blur-effect {
opacity: 0.3;
}
.effect-bubba .rollover-content {
display: block;
padding: 35px 45px;
text-align: center;
opacity: 1;
}
.effect-bubba .rollover-content:before,
.effect-bubba .rollover-content:after {
position: absolute;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.effect-bubba .rollover-content:before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.effect-bubba .rollover-content:after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
.effect-bubba:not(.always-show-info) .rollover-content .entry-title,
.effect-bubba:not(.always-show-info) .rollover-content .links-container,
.effect-bubba:not(.always-show-info) .rollover-content .rollover-thumbnails {
opacity: 0;
-webkit-transition: -webkit-transform 0.35s, opacity 0.35s;
transition: transform 0.35s, opacity 0.35s;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
.effect-bubba .rollover-content p,
.effect-bubba .rollover-content .entry-meta {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.effect-bubba .links-container,
.effect-bubba .entry-meta {
position: relative;
z-index: 10;
}
.rollover-content:before,
.rollover-content:after {
.mobile-false.mobile-false .effect-bubba .rollover-project:hover &,
.mobile-true.mobile-true .effect-bubba .rollover-project.is-clicked & {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.entry-title,
.links-container,
.rollover-thumbnails,
p,
.entry-meta {
.mobile-false.mobile-false .effect-bubba .rollover-project:hover &,
.mobile-true.mobile-true .effect-bubba .rollover-project.is-clicked & {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
/*---------------*/
/***** Sarah *****/
/*---------------*/
.wf-container.effect-sarah:not(.jg-container) .rollover-project > a > img {
.mobile-false & {
position: absolute;
top: 50%;
left: 0;
width: calc(~'100% + 20px');
max-width: calc(~'100% + 20px');
}
.filter-grayscale &,
.filter-grayscale-static & {
top: 0;
width: 100%;
max-width: 100%;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
.rollover-project > a > img {
.effect-sarah & {
max-width: none;
width: -webkit-calc(~'100% + 20px');
width: calc(~'100% + 20px');
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,-50%, 0);
transform: translate3d(-10px,-50%,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.jg-container.effect-sarah &,
.slider-wrapper.effect-sarah &,
.mobile-true .effect-sarah & {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.slider-wrapper.effect-sarah & {
width: 100%;
}
}
> a > img {
.mobile-false.mobile-false .effect-sarah.hover-color-static .rollover-project:hover &,
.mobile-true.mobile-true .effect-sarah.hover-color-static .rollover-project.is-clicked & {
opacity: 0.3;
}
.mobile-false.mobile-false .effect-sarah:not(.jg-container):not(.slider-wrapper) .rollover-project:hover &,
.mobile-false.mobile-false .effect-sarah:not(.jg-container):not(.slider-wrapper) .rollover-project.is-clicked & {
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
}
.effect-sarah .rollover-content {
display: block;
padding: 25px 40px;
text-align: left;
opacity: 1;
}
.effect-sarah .rollover-content .links-container {
text-align: left;
}
.rollover-content .entry-title,
.rollover-content .links-container,
.rollover-content .rollover-thumbnails {
.effect-sarah:not(.always-show-info) & {
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
}
.rollover-content .entry-title {
.effect-sarah & {
position: relative;
overflow: hidden;
padding: 0 0 15px;
margin-bottom: 15px;
}
}
.effect-sarah .rollover-content .entry-title:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-101%,0,0);
transform: translate3d(-100%,0,0);
}
.mobile-false.mobile-false .effect-sarah .rollover-project:hover .entry-title,
.mobile-true.mobile-true .effect-sarah .rollover-project .is-clicked .entry-title {
&:after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
opacity: 1;
}
.links-container,
.rollover-thumbnails {
.mobile-false.mobile-false .effect-sarah .rollover-project:hover &,
.mobile-true.mobile-true .effect-sarah .rollover-project .is-clicked & {
opacity: 1;
}
}
.effect-sarah .rollover-content p,
.effect-sarah .rollover-content .entry-meta {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
p,
.entry-meta {
.mobile-false.mobile-false .effect-sarah .rollover-project:hover &,
.mobile-true.mobile-true .effect-sarah .rollover-project .is-clicked & {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}