如何翻转gridster破折号小部件并在翻转后显示描述

Question

我正在使用潇洒的小部件。我想在鼠标悬停时翻转小部件，并在翻新新小部件后显示摘要详细信息。任何帮助将不胜感激。

提前致谢。

编辑：抱歉我的模糊问题。我是论坛的新手。

我试图实现与http://jsfiddle.net/mgechev/GpK25/16/

完全相同的翻转小部件

然而，在上面的jsfiddle代码中进行了一些更改后，摘要小部件显示在BGP小部件旁边，但不在预期的相同区域内。

这是我的bgp.erb代码

<style>
 .gridster .panel {
  margin: 0px auto;
}

.gridster .card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
top: 0px;
left: 0px;
}

.gridster .front {
z-index: 2;
}

.gridster .back {
z-index: 1;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

.gridster .panel:hover .front {
z-index: 1;
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}

.gridster .panel:hover .back {
z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>

<% content_for :title do %>BGP<% end %>
<div class="gridster panel">
   <ul>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
       <div class="front card" data-id="bgp" data-view="HotState" data-title="BGP"></div>
     </li>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
       <div class="front card" data-id="bgpsummary" data-view="Text" data-title="BGP Summary" data-text="Details goes here..."></div>
     </li>
  </ul>
</div>