.prism-previewer, .prism-previewer:before, .prism-previewer:after { position: absolute; pointer-events: none; } .prism-previewer, .prism-previewer:after { left: 50%; } .prism-previewer { margin-top: -48px; width: 32px; height: 32px; margin-left: -16px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transition: opacity .25s; -moz-transition: opacity .25s; -o-transition: opacity .25s; transition: opacity .25s; } .prism-previewer.flipped { margin-top: 0; margin-bottom: -48px; } .prism-previewer:before, .prism-previewer:after { content: ''; position: absolute; pointer-events: none; } .prism-previewer:before { top: -5px; right: -5px; left: -5px; bottom: -5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 5px solid #fff; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); } .prism-previewer:after { top: 100%; width: 0; height: 0; margin: 5px 0 0 -7px; border: 7px solid transparent; border-color: rgba(255, 0, 0, 0); border-top-color: #fff; } .prism-previewer.flipped:after { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 5px; border-top-color: rgba(255, 0, 0, 0); border-bottom-color: #fff; } .prism-previewer.active { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity)"; filter: alpha(opacity=1); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; }