KOKINIO - MANAGER
Edit File: overlay.css
.wrapimg h4 { color: #fff; font-size: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .wrapimg .col_2 h4.pic-title, .wrapimg .col_3 h4.pic-title { font-size: 16px; line-height: 18px; font-weight: 700; } .wrapimg .col_5 h4.pic-title, .wrapimg .col_5 h4.pic-title { font-size: 20px; line-height: 24px; font-weight: 700; } .wrapimg .colw_6 h4.pic-title, .wrapimg .colw_7 h4.pic-title { font-size: 32px; line-height: 32px; font-weight: 900; } .wrapimg a { text-decoration: none; color: rgba(74, 92, 110, 0.92); } .wrapimg a:hover { color: #fff; } .wrapimg img { max-width: 100%; } .pull-right { float: right; } .pull-left { float: left; } .wrapimg { max-width: 100%; margin: 0 auto; } .wrapimg:before, .wrapimg:after { content: ''; display: table; clear: both; } @keyframes .col_2 .pic-title h4 { font-size: 18px; } anima { from { margin-top: -50px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } to { margin: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } } @-webkit-keyframes anima { from { margin-left: -20px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } to { margin-left: 10px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } } @media screen and (max-width: 560px) { .wrapimg { padding: 20px; } } .pic { max-width: 960px; max-height: 540px; position: relative; overflow: hidden; display: inline-block; -webkit-animation: anima 2s; -moz-animation: anima 2s; -o-animation: anima 2s; -ms-animation: anima 2s; animation: anima 2s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .pic-3d { -webkit-perspective: 500; -moz-perspective: 500; -o-perspective: 500; -ms-perspective: 500; perspective: 500; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .pic-caption { cursor: default; position: absolute; width: 100%; height: 100%; background: rgba(255,0,0,0.8); padding: 10px; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .pic-image { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .pic:hover .pic-image { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .pic-title { font-size: 1.8em; } .wrapimg a, .wrapimg a:hover, .pic .pic-image, .pic-caption, .pic:hover .pic-caption, .pic:hover img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .pic:hover .bottom-to-top, .pic:hover .top-to-bottom, .pic:hover .left-to-right, .pic:hover .right-to-left, .pic:hover .rotate-in, .pic:hover .rotate-out, .pic:hover .open-up, .pic:hover .open-down, .pic:hover .open-left, .pic:hover .open-right, .pic:hover .come-left, .pic:hover .come-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -moz-touch-callout: none; -o-touch-callout: none; -ms-touch-callout: none; touch-callout: none; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; -o-tap-highlight-color: transparent; -ms-tap-highlight-color: transparent; tap-highlight-color: transparent; } .bottom-to-top { top: 50%; left: 0; } .pic:hover .bottom-to-top { top: 0; left: 0; } .top-to-bottom { bottom: 50%; left: 0; } .pic:hover .top-to-bottom { left: 0; bottom: 0; } .left-to-right { top: 0; right: 50%; } .pic:hover .left-to-right { right: 0; top: 0; } .right-to-left { top: 0; left: 50%; } .pic:hover .right-to-left { left: 0; top: 0; } .rotate-in { -webkit-transform: rotate(90deg) scale(0.1); -moz-transform: rotate(90deg) scale(0.1); -o-transform: rotate(90deg) scale(0.1); -ms-transform: rotate(90deg) scale(0.1); transform: rotate(90deg) scale(0.1); top: 0; left: 0; } .pic:hover .rotate-in { -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } .rotate-out { -webkit-transform: rotate(90deg) scale(3); -moz-transform: rotate(90deg) scale(3); -o-transform: rotate(90deg) scale(3); -ms-transform: rotate(90deg) scale(3); transform: rotate(90deg) scale(3); top: 0; left: 0; } .pic:hover .rotate-out { -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } .open-down { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); top: 0; left: 0; } .pic:hover .open-down { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0); } .open-up { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); top: 0; left: 0; } .pic:hover .open-up { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0); } .open-left { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); left: 0; top: 0; } .pic:hover .open-left { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .open-right { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); left: 0; top: 0; } .pic:hover .open-right { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .come-left { -webkit-transform: rotateY(90deg) rotateX(90deg); -moz-transform: rotateY(90deg) rotateX(90deg); -o-transform: rotateY(90deg) rotateX(90deg); -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); left: 0; top: 0; } .pic:hover .come-left { -webkit-transform: rotateY(0) rotateX(0); -moz-transform: rotateY(0) rotateX(0); -o-transform: rotateY(0) rotateX(0); -ms-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0); } .come-right { -webkit-transform: rotateY(-90deg) rotateX(-90deg); -moz-transform: rotateY(-90deg) rotateX(-90deg); -o-transform: rotateY(-90deg) rotateX(-90deg); -ms-transform: rotateY(-90deg) rotateX(-90deg); transform: rotateY(-90deg) rotateX(-90deg); left: 0; top: 0; } .pic:hover .come-right { -webkit-transform: rotateY(0) rotateX(0); -moz-transform: rotateY(0) rotateX(0); -o-transform: rotateY(0) rotateX(0); -ms-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0); } @media screen and (max-width: 560px) { .pic { max-width: 400px; max-height: 300px; display: block; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; margin: 10px auto; } }