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> <div> <div>Panel Heading</div> <div> <div> <a href="/recipes/arthritis-soother-36"> <img src= > </a> </div> </div> <div>Panel Footer</div> </div> </div> .panel-default{ width: 500px; } .panel-body hover{ background-color: yellow; border size: 20px; } 1 Answer
Update your css
.panel-default{ width: 500px; } .panel-body .img-thumbnail{padding:0px;border:1px solid transparent} /*remove padding and add transparent border*/ .panel-body:hover .img-thumbnail{ border-color: yellow; /*change the transparent border to yellow*/ border size: 20px; } 
