填写多个父母的边界onclick

Question

好的，我所拥有的是一个div - ＆gt;表 - ＆gt;行和3x列各自在div中有自己的div和图像（div是因此图像不会被border-radius剪裁）。我想要做的是扩展边框宽度，直到表格上方的父div填充边框。当我尝试这样做时，边框停止并扩展每列。我将在下面发布一些照片和代码。 对于模糊的解释我很抱歉，我不知道如何解释..任何有关更好方法的帮助和建议都非常感谢！ = d

代码：

<div class="slideshow">
   <table>
      <tr>
         <td><div class="icon_circle" ><img src="images/logo_winrar.png" alt="" /><br><figcaption>WinRar</figcaption></div></td>
         <td><div class="icon_circle" ><img src="images/logo_ollydbg.gif" alt="" /><br><figcaption>OllyDBG</figcaption></div></td>
         <td><div class="icon_circle" ><img src="images/logo_norton.png" alt="" /><br><figcaption>NortonAV</figcaption></div></td>    
      </tr>
   </table>
   <p>Lorem ipdrepnt occaecqui officia deserunt mollit anim id est laborum.</p>
</div>

的CSS：

.slideshow {
  margin-top: -50px;
  font-size: 25px;
}

.slideshow table {
  width: 100%;
  padding: 13px;
}

.slideshow table tr td {
  text-align: center;
}

.icon_circle {
  transform: scale(0.7);
  display: table;
  margin: 0 auto;
  display: block;
  width: 90px;
  height: 90px;
  padding: 25px;
  border-radius: 250px;
  border: #00000099 5px solid;
  transition: all .3s ease-in-out, border .5s;
  background: #00000000;
}

.icon_circle:hover {
  transform: scale(1);
  border-radius: 0;
  /* Glitchy border width - Expanding Table - 75px as visual example */
  border-width: 75px;
}

图片： .icon_circle：hover这样做 我知道这不是onclick但我只是使用：悬停测试。

我如何实现这个'onclick'