如何在悬停图像状态时设置不同的形状颜色？

Question

我在一列中创建了三张图片，并为这三张图片设置了column-count: 3;加border-width。现在我需要了解悬停状态。

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">
            <a href="olymbic.html">
                <h2>Saina nehwal first match</h2>
                <p>fasdfjaksdksdfh skdfk</p>
            </a>
        </div>
        <div class="popular">
            <a href="#">
                <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
            </a>
        </div>
        <div class="caption">
            <a href="#">
                <h2>Saina nehwal first match</h2>
                <p>fasdfjaksdksdfh skdfk</p>
            </a>
        </div>
        <div class="popular">
            <a href="#">
                <img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
            </a>
        </div>
        <div class="caption">
            <a href="#">
                <h2>Saina nehwal first match</h2>
                <p>fasdfjaksdksdfh skdfk</p>
            </a>
        </div>
    </div>
</div>

当我悬停图片时，它需要看起来像这样：

这是我的jsfiddle：http://jsfiddle.net/6g7v899q/

我可以知道，怎么做？

提前致谢。

Answer 1

那样的事情呢？

img{margin:40px;border:25px solid white;}
img:hover{border-left:25px inset gray;border-right:25px outset gray;border-top:25px outset white;border-bottom:25px inset white;}

<img src="http://lorempixel.com/200/200" width="200" height="200" />