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;
}
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;
}
