/* type 15 */ .photobox_type15 .photobox__previewbox:before{ width: 0; height: 0; padding: 25%; background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8)); border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .4s) ease; transition: -webkit-transform var(--photoboxAnimationDuration, .4s) ease; transition: transform var(--photoboxAnimationDuration, .4s) ease; transition: transform var(--photoboxAnimationDuration, .4s) ease, -webkit-transform var(--photoboxAnimationDuration, .4s) ease; will-change: transform; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .photobox_type15:hover .photobox__previewbox:before{ -webkit-transform: translate(-50%, -50%) scale(4); transform: translate(-50%, -50%) scale(4); -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2); transition-duration: calc(var(--photoboxAnimationDuration, .4s) * 2); } .photobox_type15 .photobox__label{ width: 95%; text-align: center; opacity: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity var(--photoboxAnimationDuration, .4s) ease-out; transition: opacity var(--photoboxAnimationDuration, .4s) ease-out; will-change: opacity; position: absolute; top: 50%; left: 50%; z-index: 3; } .photobox_type15:hover .photobox__label{ -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2); transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2); -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2); transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2); opacity: 1; } .photobox_type15 .photobox__preview{ -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9); transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9); transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9); transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9); will-change: transform; -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); } .photobox_type15:hover .photobox__preview{ -webkit-transform: scale(1.2) translate(4%, 4%); transform: scale(1.2) translate(4%, 4%); }