Border to edges of a div on hover with bootstrap - html

Question

Is there a way to create a border on hover for only edges of the div. Here is the basic layout of my grid created using bootstrap. here is my codepen http://codepen.io/anon/pen/zvxEYw
<div class="product-grid col-md-4">
<a class="preview" href="#">PREVIEW</a>
</div>
.product-grid{
margin:30px 0 0 30px;
border:1px solid #ccc;
height:300px;
display:block;
}
.product-grid:hover{
border:1px solid #000;
}
/* Preview */
.preview {
opacity: 0;
position: absolute;
left: 40px;
right: 40px;
top: 0;
height: 30px;
line-height: 32px;
background-color: #fe3;
text-align: center;
text-decoration: none;
color: #000;
transition: .2s;
}
.product-grid:hover .preview {
opacity: 1;
top: 80px;
}
For clear understand I have attached a sample image below

Answer 1

Achieving that kind of effect, is best possible if you use CSS3, and I've done it by using <svg> as:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="900" y2="0" />
<line class="left" x1="0" y1="460" x2="0" y2="-920" />
<line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
<line class="right" x1="300" y1="0" x2="300" y2="1380" />
</svg>
Here look into my JSFiddle, Hope you're looking something like this.
And it will do the trick for you.
Further customization is no big deal, just look into its CSS and you can changes it as per your requirement.
Source: tympanus

Answer 2

please try this one sir:
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
#div1:hover {
border: 1px solid red;
}
DEMO