Bootstrap Hover Function and Border Display

I am trying to create a small panel with an image and trying to figure out two things for it. I can't seem to get the border around the image to fit it. There is a small gap and I want the border to fit around the image. Also I want it so that when the user hovers over the image the border around the image turns yellow. For some reason those I can't seem to get these two things to work. Any help on this matter would be great

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">

   <div class="pull-left col-xs-12 col-sm-6 col-md-6">
                <a href="/recipes/arthritis-soother-36">

                       <img class="img-thumbnail img-responsive media-object" src= >

                </a>
            </div>

    </div>
     <div class="panel-footer">Panel Footer</div>
  </div>
</div>

.panel-default{
  width: 500px;
}

.panel-body hover{
   background-color: yellow;
   border size: 20px;
}

Fiddle