悬停在图像上时如何设置不同的背景形状？

Question

我在列中创建了三个图像，然后设置

column-count: 3;

我为这三张图片设置了边框宽度。现在我需要了解悬停状态。

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/

我需要这样的东西[你可以在阅读帖子部分时参考这个网站gatesnotes.com吗？我需要这样的..]

我可以知道，怎么做？

提前致谢。

Answer 1

这可以通过框中width和color的边框来实现，您引用的页面具有以下样式：

.hpunit .hpimgrel .hpbook:hover .gbox {
   border-left: 59px solid #ddd;
   border-right: 59px solid #ddd;
}

在您的代码中可以是这样的：

.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"><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>