.cropFrame { overflow : hidden; position : relative; display: inline-block; } .cropImage { position : absolute; top : 0; left : 0; cursor : move; max-width: none; } .cropControls { background : #000; width : 100%; height : 26px; position : absolute; z-index : 100; bottom : 0; left : 0; opacity : 0; filter : alpha(opacity=0); transition : opacity .25s linear; -moz-transition : opacity .25s linear; -webkit-transition : opacity .25s linear; t-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cropFrame.hover .cropControls { opacity : .55; filter : alpha(opacity=55); } .cropControls span { display : block; float : left; color : #fff; font-size : 11px; margin : 7px 0 0 5px; } .cropZoomIn, .cropZoomOut { display : block; float : right; margin : 4px 4px 0 0; padding : 0; background : #fff; border: 1px solid #000; color : #000; border-radius : 4px; width : 18px; height : 18px; line-height : 16px; font-size : 18px; text-align : center; text-decoration : none; cursor : pointer; } .cropZoomIn::after, .cropZoomIn .after { content : "+"; display : block; text-align:center; } .cropZoomOut::after, .cropZoomOut .after { content : "-"; display : block; text-align:center; } /*IE8*/ .cropZoomIn:after, .cropZoomIn .after { content : "+"; display : block; text-align:center; } /*IE8*/ .cropZoomOut:after, .cropZoomOut .after { content : "-"; display : block; text-align:center; }