I have a little icon that I want to expand when hovered over and then return to its original size when the mouse moves away. I was able to achieve this using the following CSS code:
$(".jq_icon").hover(function() {
$(this).stop().animate({width:56, height:56,left:-8,top:-8},'fast');
},
function() {
$(this).stop().animate({width:36,height:36,left:8,top:8},'fast');
});
However, the image itself does not actually grow. How can I make it work with cross-browser support?
Additionally, I am working with a CMS (Joomla) and as far as I know (please correct me if I'm wrong), you cannot directly add images to the index page using the 'img' tag. It seems that images can only be displayed using 'background-images' through CSS.
Thank you in advance for your help!