.circle { float:left; position: relative; width: 250px; height: 250px; border:1px solid #000; overflow: hidden; } .circle img { width: 100%; height: 100%; border: 10px solid #00aaff; -webkit-border-radius:50%; -khtml-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%; -webkit-box-sizing:border-box; -khtml-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } .circle .mask-top-container, .circle .mask-bottom-container { position: absolute; top: -1px; left: -1px; width: 101%; height: 51%; overflow: hidden; } .circle .mask-bottom-container { top: 50%; } .circle .mask-top, .circle .mask-bottom { width: 100%; height: 100%; background: #fff; -webkit-transition:all 500ms ease-in-out; -khtml-transition:all 500ms ease-in-out; -moz-transition:all 500ms ease-in-out; -ms-transition:all 500ms ease-in-out; -o-transition:all 500ms ease-in-out; transition:all 500ms ease-in-out; -webkit-transform-origin:50% 100%; -khtml-transform-origin:50% 100%; -moz-transform-origin:50% 100%; -ms-transform-origin:50% 100%; -o-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-backface-visibility: hidden; -khtml-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .circle .mask-bottom { -webkit-transform-origin:50% 0%; -khtml-transform-origin:50% 0%; -moz-transform-origin:50% 0%; -ms-transform-origin:50% 0%; -o-transform-origin:50% 0%; transform-origin:50% 0%; } .circle:hover .mask-top{ -webkit-transform:rotate(180deg); -khtml-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } .circle:hover .mask-bottom{ -webkit-transform:rotate(-180deg); -khtml-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); }