.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; }