/* Common style */ .effect-lily { position: relative; float: left; overflow: hidden; background-color: #000; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .effect-lily .pw-caption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .effect-lily p { margin: 0; } .effect-lily p { letter-spacing: 1px; font-size: 90%; } /*---------------*/ /***** Lily *****/ /*---------------*/ .effect-lily img { max-width: none; width: -webkit-calc(100% + 50px); width: calc(100% + 50px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-40px,0, 0); transform: translate3d(-40px,0,0); } /* .cell { max-width: none; width: -webkit-calc(100% + 50px); width: calc(100% + 50px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-40px,0, 0); transform: translate3d(-40px,0,0); } */ .effect-lily h2, .effect-lily p { -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); } .effect-lily h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .effect-lily p { color: rgba(255,255,255,0.8); opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; } .effect-lily:hover img, .effect-lily:hover p { opacity: 1; } .effect-lily:hover img, .effect-lily:hover h2, .effect-lily:hover p { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .effect-lily:hover p { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; } /* Instagram hover effect*/ .snip1467 { position: relative; overflow: hidden; width: 100%; background-color: #000000; } .snip1467 *, .snip1467 *:before, .snip1467 *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .snip1467 img { max-width: 100%; vertical-align: top; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .snip1467 figcaption { position: absolute; bottom:0; width: 100%; -webkit-transform: translateY(-25%); transform: translateY(-25%); padding: 5px 40px; opacity: 0; } .snip1467 p { font-weight: 400; margin: 0; font-size: 0.9em; color:#FFFFFF; text-align:center } .pw-heart { left: 20%; } .pw-comment { right: 20%; } .snip1467 i { color:#FFFFFF; position: absolute; top: 45%; font-size: 24px; line-height: 1em; opacity: 0; -webkit-transition: all 0.4s cubic-bezier(0.6, -0.8, 0.735, 0.045); transition: all 0.4s cubic-bezier(0.6, -0.8, 0.735, 0.045); } .pw-instagram, .pw-flickr { right: 45%; } .snip1467:hover img, .snip1467.hover img { -webkit-transform: scale(1.12); transform: scale(1.12); opacity: 0.4; } .snip1467:hover figcaption, .snip1467.hover figcaption { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; } .snip1467:hover i, .snip1467.hover i { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .instagram-video { position:absolute; right: 7px; top: 7px; }