動畫懸停綠色標籤純CSS

Question

我有以下HTML

<table style="position:relative; left: 10px; top:5px;"> 
      <tr id="all_extended"> 
       <td id="pucenas"> 
        <img id="cenas"></img> 
       </td> 
       <td id="slide"> 
        <div id="slider"> 
        </div> 
       </td> 
      </tr> 
</table> 

和CSS

#slide{ 
    height:100%; 
    border: none; 
    padding-left:20px; 
    display:none; 
} 

#slider{ 
    border: none; 
    padding-left:30px; 
    background-color:green; 
    position:relative; 
    height:100%; 
    opacity:0; 
    width:0px; 
    overflow:hidden; 

    transition: width 10s linear 2s; 
    /* safari is webkit */ 
    -webkit-transition:width 1s linear 2s; 
    transition: opacity 10s linear 2s; 
    /* safari is webkit */ 
    -webkit-transition:opacity 1s linear 2s; 
} 

#cenas{ 
    width:99%; 
    height:100%; 
    border: solid black 1px; 
    position:relative; 
    left: 0%; 
} 

#pucenas{ 
    font-size: 0; 
    width:100px; 
    height:100px; 
    position:relative; 
    border: solid black 1px; 
    margin: 0px; 
    padding: 0px; 
    cursor:pointer; 
} 

#all_extended:hover #slide{ 
    width: 200px; 
    display:inline; 
} 

我想是一個綠色標籤出現，當我們徘徊黑色方塊，就像這個圖像顯示http://awwapp.com/s/99/5e/21.png（它應該是動畫和純粹的css）。任何想法在這一個？

Answer 1

這就是我使用動畫製作.slider的寬度和漸變來解決它的方法。

這裏是html：

<div class="parent"> 
    <div class="slider"> 
     <span>Some content about this image</span> 
    </div> 
</div> 

的css：

.parent { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-image: url("http://fc01.deviantart.net/fs71/i/2011/237/8/a/fox_yawn_by_krankeloon-d47t1ut.jpg"); 
    background-position: center; 
    background-size: cover; 
} 

.slider { 
    position: absolute; 
    left: 110%; 
    width: 100%; 
    height: 100%; 
    background: -webkit-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0)); 
    background: -moz-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0)); 
    background: -ms-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0)); 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    overflow: hidden; 
    width: 0; 
    text-wrap: none; 
} 

.parent:hover .slider { 
    background: rgba(9, 146, 26, 1); 
    width: 100%; 
} 

最後這裏是一個小提琴：Demo

Answer 2

這裏是我的本錢提供：

http://jsfiddle.net/U7A95/1/

HTML

<div id="all_extended"> 
    <div id="pucenas"> 
     <img id="cenas" src="http://lorempixel.com/80/80/"></img> 
    </div> 
    <div id="slide"> 
    </div> 
</div> 

CSS

#slide{ 
    display:inline-block; 

    margin-left:30px; 
    background-color:green; 
    width:0px; 
    opacity:0; 

    overflow:hidden; 
    position:absolute; 
    bottom:0; 
    top:0; 

    transition: all 1s linear 1s; 
    -webkit-transition: all 1s linear 1s; 
} 

#all_extended:hover #slide{ 
    width: 200px; 
    opacity: 1; 
} 

#pucenas{ 
    display:inline-block; 
} 
#all_extended{ 
    position:relative; 
} 

過渡多個屬性，使用all，如果你只是名單width和opacity在單獨的規則中，最後覆蓋前一個，所以只有一個轉換。爲了獲得正確的高度，我將頂部和底部設置爲0，以便它緊貼包裝的頂部和底部。