My goal is to make my logo image move up on hover without affecting the text below it. However, I'm facing an issue where both elements are triggered simultaneously even though they are in different divs wrapped in a parent div. It seems like there might be a problem with the margins, as when I tried adjusting them, the behavior of the text elements became erratic.
CSS:
.full-circle {
display:block;
margin:auto;
margin-top: 15px;
overflow: hidden;
height: 180px;
width: 180px;
border: 2px solid #FFF;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background:#FDF5E6;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}
.full-circle:hover{margin-top: 2px;}
jQuery:
$('.full-circle').hover(
function(){
$(this).stop().animate(
{marginTop: '2'}, 20, 'linear'
);//end animate
},//end function
function(){
$(this).stop().animate(
{marginTop: '15'}, 20, 'linear'
);//end animate
}//end function
);//end hover