.cptchpls_img:hover { cursor: default; position: relative; z-index: 10; -webkit-transition: 300ms ease-in-out; -moz-transition: 300ms ease-in-out; -o-transition: 300ms ease-in-out; transition: 300ms ease-in-out; } .cptchpls_left:hover { /* move to the right and increase the size of image */ -webkit-transform: translateX(100%) scale(3, 3); -moz-transform: translateX(100%) scale(3, 3); -o-transform: translateX(100%) scale(3, 3); -ms-transform: translateX(100%) scale(3, 3); transform: translateX(100%) scale(3, 3); } .cptchpls_right:hover { /* move to the left and increase the size of image */ -webkit-transform: translateX(-100%) scale(3, 3); -moz-transform: translateX(-100%) scale(3, 3); -ms-transform: translateX(-100%) scale(3, 3); -o-transform: translateX(-100%) scale(3, 3); transform: translateX(-100%) scale(3, 3); } .cptchpls_center:hover { /* increase the size of image */ -webkit-transform: scale(3, 3); -moz-transform: scale(3, 3); -o-transform: scale(3, 3); -ms-transform: scale(3, 3); transform: scale(3, 3); } .cptchpls_reload_button:hover { cursor:pointer; opacity: 0.7; -webkit-animation-name: spin; -webkit-animation-duration: 800ms; -webkit-animation-timing-function: linear; -webkit-transform-origin: 50% 50%; -moz-animation-name: spin; -moz-animation-duration: 800ms; -moz-animation-timing-function: linear; -moz-transform-origin: 50% 50%; -ms-animation-name: spin; -ms-animation-duration: 800ms; -ms-animation-timing-function: linear; -ms-transform-origin: 50% 50%; -o-animation-name: spin; -o-animation-duration: 800ms; -o-animation-timing-function: linear; -o-transform-origin: 50% 50%; animation-name: spin; animation-duration: 800ms; animation-timing-function: linear; transform-origin: 50% 50%; } /* rotation with resizing */ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg) scale(1, 1); } 50% { -webkit-transform: rotate(180deg) scale(1.3, 1.3); } to { -webkit-transform:rotate(360deg) scale(1, 1); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg) scale(1, 1); } 50% { -moz-transform: rotate(180deg) scale(1.3, 1.3); } to { -moz-transform:rotate(360deg) scale(1, 1); } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg) scale(1, 1); } 50% { -ms-transform: rotate(180deg) scale(1.3, 1.3); } to { -ms-transform:rotate(360deg) scale(1, 1); } } @-o-keyframes spin { from { -o-transform: rotate(0deg) scale(1, 1); } 50% { -o-transform: rotate(180deg) scale(1.3, 1.3); } to { -o-transform:rotate(360deg) scale(1, 1); } } @keyframes spin { from { transform: rotate(0deg) scale(1, 1); } 50% { transform: rotate(180deg) scale(1.3, 1.3); } to { transform:rotate(360deg) scale(1, 1); } }