how to set different background shape when hover on image? - html

Question

I have created three images in column, and i set
column-count: 3;
And i set border-width for those three images. Now i need to know about hover state.
Html:
<div class="wrap">
<h1 class="content-title">
<span>Popular</span>
</h1>
<div class="col-3">
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
</a>
</div>
<div class="caption"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
</a>
</div>
<div class="caption"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
</a>
</div>
<div class="caption"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p>
</div>
</div>
</div>
When i hover an image, It need to show like this
And here is my worked jsfiddle: http://jsfiddle.net/6g7v899q/
I need something like this [can you please refer this site gatesnotes.com in reading post part?.. I need like this.. ]
May i know, how to do this?
Thanks in advance.

Answer 1

This can be possible with the width and color of the borders on the box, the page you refer has this styles:
.hpunit .hpimgrel .hpbook:hover .gbox {
border-left: 59px solid #ddd;
border-right: 59px solid #ddd;
}
In your code can be like this:
.popular {
display:inline-block;
border:40px solid #eee;
box-sizing:border-box;
}
.popular:hover {
border-left:40px solid gray;
border-right:40px solid gray;
}
<div class="wrap">
<h1 class="content-title">
<span>Popular</span>
</h1>
<div class="col-3">
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
</a>
</div>
<div class="caption"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
</a>
</div>
<div class="caption"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg" />
</a>
</div>
<div class="caption"><h2>Saina nehwal first match</h2><p>fasdfjaksdksdfh skdfk</p>
</div>
</div>
</div>