Zoom a CSS Circle
HTML
<div id="zoom"></div>
CSS
#zoom {
width: 50px;
height:50px;
border-radius: 75px;
cursor:pointer;
background-color: red;
text-align: center;
}
JavaScript
$('#zoom').hover(
function() {
$(this).animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 100,
borderBottomRightRadius: 100,
width: 200,
height: 200
}, 500)
},
function() {
$(this).animate({
borderTopLeftRadius: 75,
borderTopRightRadius: 75,
borderBottomLeftRadius: 75,
borderBottomRightRadius: 75,
width: 1280,
height: 780,
}, 500)
}
);