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.