背景色のCSS遷移

Question

ホバー上に暗いオーバーレイがある画像があります。これはうまくいくが、バックグラウンドをスライドさせたい。私は、トランジションやバックグラウンドのショーでそれをやってみましたが、中にスライドしない。 これは私のコード

HTML

<div class="products_overlay"> 
    <a href="<?php echo $_product->getProductUrl() ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200); ?>" class="hover_test" /></a> 

    <ul> 
     <li> 
      <?php echo $_product->getData(‘price’); ?></li> 
     <li> 
      <?php echo $_product->getAttributeText(‘desc); ?></li> 
     <li> 
      <?php echo $_product->getAttributeText('country'); ?></li> 
    </ul> 

</div> 

CSS

.hover_test { 
     position: relative; 
    } 
    .products_overlay:hover:after { 
     content: ""; 
     position: absolute; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     background-color: rgba(0, 0, 0, 0.8); 
     -webkit-transition: background-color .5s ease-in; 
     -moz-transition: background-color .5s ease-in; 
     -o-transition: background-color .5s ease-in; 
     -ms-transition: background-color .5s ease-in; 
     transition: background-color .5s ease-in; 
    } 

どのように上の任意の提案ですこれを行う？

Answer 1

これを試してみてください：

.hover_test {position:relative;} 

.products_overlay:after { 
    content:""; 
    position:absolute; top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    background: rgba(0, 0, 0, 0.8); 
    overflow: hidden; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s; 
    width:0; 
    } 

.products_overlay:hover:after{ 
    width:100%; 
}