Css transition with background-color

Question

I've got an image with a dark overlay on hover. This works, but I want the background to slide in . I've tried doing it with transitions and the background shows, but doesn't slide in. This is my code

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;
  }

Any suggestion on how to do this?

Answer 1

Try this:

.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%;
}