.team_corusel .item { margin: 10px; } .team_photo { overflow: hidden; width: auto; height: auto; } .team_photo:hover .mask { opacity: 0; } .team_photo:hover .mask.mask-3 { opacity: 0.1; background-color: black; width: 100%; height: 100%; } .team_photo .mask, .team_photo .content { width: 270px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .team_photo img { display: block; height: auto; position: relative; width: 100%; } .team_photo h2 { background: none repeat scroll 0 0 transparent; color: #000; font-size: 14px; padding: 10px; position: relative; text-align: center; text-transform: uppercase; font-weight: 500; line-height: 60px; } .team_photo .mask-1, .team_photo .mask-2, .team_photo .mask-3 { background-color: rgba(0,0,0,0.8); height: 450px; width: 450px; background: rgba(0,0,0,0.5); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); opacity: 1; -webkit-transition: all .3s ease-in-out .6s; -moz-transition: all .3s ease-in-out .6s; -o-transition: all .3s ease-in-out .6s; transition: all .3s ease-in-out .6s; } .team_photo .mask-1, .team_photo .mask-2, .team_photo .mask.mask-3 { opacity: 0; } .team_photo .mask-1 { top: -20px; left: auto; right: 0; -webkit-transform: rotate(56.5deg) translateX(-180px); -moz-transform: rotate(56.5deg) translateX(-180px); -o-transform: rotate(56.5deg) translateX(-180px); -ms-transform: rotate(56.5deg) translateX(-180px); transform: rotate(56.5deg) translateX(-180px); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0 } .team_photo .mask-2 { top: auto; bottom: -20px; -webkit-transform: rotate(56.5deg) translateX(180px); -moz-transform: rotate(56.5deg) translateX(180px); -o-transform: rotate(56.5deg) translateX(180px); -ms-transform: rotate(56.5deg) translateX(180px); transform: rotate(56.5deg) translateX(180px); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100% } .team_photo .content { background: rgba(255,255,255,0.99); height: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); opacity: 0.5; width: 180%; overflow: hidden; -webkit-transform: rotate(-33.5deg) translate(-112px,166px); -moz-transform: rotate(-33.5deg) translate(-112px,166px); -o-transform: rotate(-33.5deg) translate(-112px,166px); -ms-transform: rotate(-33.5deg) translate(-112px,166px); transform: rotate(-33.5deg) translate(-112px,166px); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transition: all .4s ease-in-out .3s; -moz-transition: all .4s ease-in-out .3s; -o-transition: all .4s ease-in-out .3s; transition: all .4s ease-in-out .3s; } .team_photo:hover .content { height: 80px; width: 100%; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); opacity: 0.8; margin-top: 50%; -webkit-transform: rotate(0deg) translate(0,-50%); -moz-transform: rotate(0deg) translate(0,-50%); -o-transform: rotate(0deg) translate(0,-50%); -ms-transform: rotate(0deg) translate(0,-50%); transform: rotate(0deg) translate(0,-50%) } .team_photo:hover .content h2 { margin: 0; } .team_photo:hover .mask-1, .team_photo:hover .mask-2 { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s } .team_photo:hover .mask-1 { top: 0; /*-webkit-transform: rotate(56.5deg) translateX(1px);*/ /*-moz-transform: rotate(56.5deg) translateX(1px);*/ /*-o-transform: rotate(56.5deg) translateX(1px);*/ /*-ms-transform: rotate(56.5deg) translateX(1px);*/ /*transform: rotate(56.5deg) translateX(1px) */ -webkit-transform: rotate(56.5deg) translateX(0.8px); -moz-transform: rotate(56.5deg) translateX(0.7px); -o-transform: rotate(56.5deg) translateX(0.7px); -ms-transform: rotate(56.5deg) translateX(0.7px); transform: rotate(56.5deg) translateX(0.7px) } .is-firefox .team_photo:hover .mask-1 { top: 0; /*-webkit-transform: rotate(56.5deg) translateX(1px);*/ /*-moz-transform: rotate(56.5deg) translateX(1px);*/ /*-o-transform: rotate(56.5deg) translateX(1px);*/ /*-ms-transform: rotate(56.5deg) translateX(1px);*/ /*transform: rotate(56.5deg) translateX(1px) */ -moz-transform: rotate(56.5deg) translateX(0.77px); transform: rotate(56.5deg) translateX(0.77px) } .team_photo:hover .mask-2 { bottom: 0; -webkit-transform: rotate(56.5deg) translateX(-1px); -moz-transform: rotate(56.5deg) translateX(-1px); -o-transform: rotate(56.5deg) translateX(-1px); -ms-transform: rotate(56.5deg) translateX(-1px); transform: rotate(56.5deg) translateX(-1px) } .mask-1 { right: -60px !important } .mask-2 { left: -60px !important }