.module-pro-image + * {
clear: both;
}
.module-pro-image .image-pro-wrap {
display: block;
position: relative;
overflow: hidden;
}
.module-pro-image .image-pro-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
visibility: hidden;
}
.module-pro-image .image-pro-overlay-inner {
position: absolute;
top: 50%;
left: 5%;
right: 5%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.module-pro-image .image-pro-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.module-pro-image .image-pro-title,
.module-pro-image .image-pro-caption {
color: #fff;
margin: 0 0 1em 0;
padding: 0;
}
.module-pro-image .image-pro-title,
.module-pro-image .image-pro-caption,
.module-pro-image .image-pro-action-button {
position: relative;
left: -100%;
opacity: 0;
transition: all .2s;
}
.module-pro-image .image-pro-action-button {
padding: .4em 1em;
line-height: 1.2em;
border: none;
}
.module-pro-image .builder_button.image-pro-action-button.outline {
background: none;
border: 2px solid #fff;
color: #fff;
}
.module-pro-image .builder_button.image-pro-action-button.white {
background: #fff;
color: #000;
}
.module-pro-image .builder_button.image-pro-action-button.outline:before,
.module-pro-image .builder_button.image-pro-action-button.default:before {
display: none;
}
.module-pro-image .image-pro-wrap:hover .image-pro-title,
.module-pro-image .image-pro-wrap:hover .image-pro-caption,
.module-pro-image .image-pro-wrap:hover .image-pro-action-button {
left: 0;
opacity: 1;
}
.module-pro-image .image-pro-title {
transition-delay: .2s;
}
.module-pro-image .image-pro-caption {
transition-delay: .35s;
}
.module-pro-image .image-pro-action-button {
transition-delay: .5s;
}
/**
* Image Appearance
*/
.module-pro-image.rounded .image-pro-flip-box,
.module-pro-image.circle .image-pro-flip-box {
overflow: hidden;
}
.module-pro-image.rounded .image-pro-flip-box-wrap,
.module-pro-image.rounded img,
.module-pro-image.rounded .image-pro-flip-box,
.module-pro-image.rounded .image-pro-overlay {
border-radius: 1em;
}
.module-pro-image.circle img,
.module-pro-image.circle .image-pro-flip-box,
.module-pro-image.circle .image-pro-overlay {
border-radius: 100%;
}
.module-pro-image.fullwidth_image .image-pro-wrap {
display: block;
}
.module-pro-image.fullwidth_image img {
width: 100%;
}
.module-pro-image.image_alignment_left{
float: left;
}
.module-pro-image.image_alignment_center{
float:none;
text-align:center;
}
.module-pro-image.image_alignment_right{
float: right;
}
/*
* Filters
*/
.module-pro-image.filter-grayscale .image-pro-wrap:hover img,
.module-pro-image.filter-grayscale-reverse img {
-webkit-filter: grayscale(1);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: gray;
filter: grayscale(1);
}
.module-pro-image.filter-sepia img {
-webkit-filter: sepia(1);
-ms-filter: sepia(100%);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: sepia(100%);
}
.module-pro-image.filter-blur img {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.module-pro-image.filter-sepia .image-pro-wrap:hover img,
.module-pro-image.filter-blur .image-pro-wrap:hover img,
.module-pro-image.filter-grayscale .image-pro-wrap img,
.module-pro-image.filter-grayscale-reverse .image-pro-wrap:hover img {
-webkit-filter: none;
filter: none;
}
/**
* Image Effects
*/
.module-pro-image img {
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.module-pro-image.effect-zoomin img {
-webkit-transform: scale(1);
transform: scale(1);
}
.module-pro-image.effect-zoomin .image-pro-wrap:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.module-pro-image.effect-zoomout img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.module-pro-image.effect-zoomout .image-pro-wrap:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
.module-pro-image.effect-rotate img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
}
.module-pro-image.effect-rotate .image-pro-wrap:hover img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
.module-pro-image.effect-shine .image-pro-wrap::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.module-pro-image.effect-shine .image-pro-wrap:hover::before {
-webkit-animation: image-pro-shine .75s;
animation: image-pro-shine .75s;
}
@-webkit-keyframes image-pro-shine {
100% {
left: 125%;
}
}
@keyframes image-pro-shine {
100% {
left: 125%;
}
}
.module-pro-image.effect-glow .image-pro-wrap::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.module-pro-image.effect-glow .image-pro-wrap:hover::before {
-webkit-animation: image-pro-glow .75s;
animation: image-pro-glow .75s;
}
@-webkit-keyframes image-pro-glow {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes image-pro-glow {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
.module-pro-image .image-pro-flip-box-wrap {
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
overflow: hidden;
}
.module-pro-image .image-pro-flip-box {
height: 100%;
position: relative;
display: block;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 750ms;
-moz-transition: 750ms;
-o-transition: 750ms;
-ms-transition: 750ms;
transition: 750ms;
}
.module-pro-image .image-pro-flip-box > img,
.module-pro-image .image-pro-overlay {
overflow: hidden;
margin-bottom: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 11;
background-position: center;
background-size: cover;
}
.module-pro-image .image-pro-overlay {
visibility: hidden;
}
/* Horizontal Flip */
.module-pro-image.entrance-effect-flip-horizontal .image-pro-flip-box-wrap {
overflow: visible;
}
.module-pro-image.entrance-effect-flip-horizontal img,
.module-pro-image.entrance-effect-flip-horizontal .image-pro-overlay {
-webkit-transition: 750ms;
-moz-transition: 750ms;
-o-transition: 750ms;
-ms-transition: 750ms;
transition: 750ms;
}
.module-pro-image.entrance-effect-flip-horizontal img {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.module-pro-image.entrance-effect-flip-horizontal .image-pro-overlay {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.module-pro-image.entrance-effect-flip-horizontal.image-pro-flip img {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.module-pro-image.entrance-effect-flip-horizontal.image-pro-flip .image-pro-overlay {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* Vertical Flip */
.module-pro-image.entrance-effect-flip-vertical .tile-flip-box-wrap {
overflow: visible;
}
.module-pro-image.entrance-effect-flip-vertical img,
.module-pro-image.entrance-effect-flip-vertical .image-pro-overlay {
-webkit-transition: 750ms;
-moz-transition: 750ms;
-o-transition: 750ms;
-ms-transition: 750ms;
transition: 750ms;
}
.module-pro-image.entrance-effect-flip-vertical img {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.module-pro-image.entrance-effect-flip-vertical .image-pro-overlay {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.module-pro-image.entrance-effect-flip-vertical.image-pro-flip img {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.module-pro-image.entrance-effect-flip-vertical.image-pro-flip .image-pro-overlay {
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.module-pro-image .image-pro-overlay.animated,
.module-pro-image.entrance-effect-flip-vertical .image-pro-overlay,
.module-pro-image.entrance-effect-flip-horizontal .image-pro-overlay {
visibility: visible;
}
/* partial overlay */
.module-pro-image.entrance-effect-partial-overlay .image-pro-overlay {
visibility: visible;
top: 84%;
display: block;
transition: .3s;
}
.module-pro-image.entrance-effect-partial-overlay.circle .image-pro-flip-box {
overflow: hidden;
border-radius: 100%;
}
.module-pro-image.entrance-effect-partial-overlay.rounded .image-pro-flip-box {
overflow: hidden;
border-radius: 1em;
}
.module-pro-image.entrance-effect-partial-overlay .image-pro-overlay-inner {
top: 5%;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.module-pro-image.entrance-effect-partial-overlay .image-pro-wrap:hover .image-pro-overlay-inner {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.module-pro-image.entrance-effect-partial-overlay .image-pro-title,
.module-pro-image.entrance-effect-partial-overlay .image-pro-caption,
.module-pro-image.entrance-effect-partial-overlay .image-pro-action-button {
left: 0;
opacity: 1;
}
.module-pro-image.entrance-effect-partial-overlay .image-pro-wrap:hover .image-pro-overlay {
top: 0;
}
.module-pro-image.entrance-effect-partial-overlay .image-pro-caption,
.module-pro-image.entrance-effect-partial-overlay .image-pro-action-button {
opacity: 0;
}
.module-pro-image.entrance-effect-partial-overlay .image-pro-wrap:hover .image-pro-caption,
.module-pro-image.entrance-effect-partial-overlay .image-pro-wrap:hover .image-pro-action-button {
opacity: 1;
}
.module-pro-image.entrance-effect-none .image-pro-overlay {
visibility: visible !important;
}
.module-pro-image.entrance-effect-none .image-pro-overlay .image-pro-title,
.module-pro-image.entrance-effect-none .image-pro-overlay .image-pro-caption,
.module-pro-image.entrance-effect-none .image-pro-overlay .image-pro-action-button {
left: 0;
opacity: 1;
}
.image-pro-external{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
z-index: 1;
}