css - 带有投票和用户名的图像翻转

Question

我一直在开发一个应用程序，它使用他们的 API 提取 instagram 图像。我需要在悬停时在心脏翻转上显示“喜欢”的数量和用户名。我将如何做到这一点？我附上了我当前应用程序前端的抓取（用户名和投票未显示在此处）。非常感谢您！

<ul>
    <li id= 'instagram'>
     <div class="roll">     
            <IMG class="on" img src='{{i[0]}}'/>
            <IMG class="off" img src="http://f.cl.ly/items/321322043C0Y2g0R2K0g/smallerheart.jpg"/>
            <div id="caption">{{i[1]}}</div>
            <div id="username">{{i[2]}}</div>   
            <div id="likes">{{i[3]}}</div>  
     </div>
   </li>
</ul>   

img {
    width: 300px;
    height: 300px;
    padding: 1px;
    background-color: white;} 

.roll 
    .width: 300px;}
    .height: 300px;}
    .opacity:0;}
    .roll {background: blue;}
    .roll .on {display: block;}
    .roll .off {display: none;}
    .roll:hover .off { z-index:0; position: relative; display: block;}
    .roll:hover .on {z-index:0; position: absolute; display: block;}    

li#instagram {
    float: left;
    display: ;
    margin-bottom: 20px;
    background-color: white;
    z-index:1;
    list-style-type: none;}     

#caption {
    font-family:'Linotype Univers W01 Cn';
    font-size: 14px;
    font-color:white;
    width: 300px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    padding: 3px 0px 0px 0px;
    text-align: center;
    background-color: #FF6633;
    overflow: hidden;}