image grow effect with keyboard event

i have an application that grows image gradually when mouse is placed on that i want similar kind of image grow effect with keyboard event i.e, focus/blur instead of mouseover/mouseout.

here is my code of image grow with mouseover/mouseout: demo

i want 开发者_开发知识库same to be done with keyboard events so i placed image inside button and replaced mouseover/mouseout with focus/blur it does work,but image inside button with mouseover/mouseout works.i am confused please help. demo1

If you don't mind a workaround approach (since you can't directly focus an image element):

<a href="#" class="foci"><img src="something.png" /></a>

With the following CSS:

a.foci {
    cursor: default;
}
img {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    background-color: #ffa;
}
a:focus img {
    width: 200px;
    height: 200px;
}

JS Fiddle demo.

Edited to provide jQuery animation effect:

$('a:has(img)').focus(
    function(){
        $(this).find('img').animate(
            {
                'width': '200px',
                'height': '200px'
            }, 1500);
    });
$('a:has(img)').blur(
    function(){
        $(this).find('img').animate(
            {
                'width': '100px',
                'height': '100px'
            }, 1500);
    });

JS Fiddle demo.

You cannot have "focus" on an image. Only form elements which have input can have be the focus of the keyboard, thus an image cannot be the cause of a focus or blur event.