MariaL MariaL - 4 months ago 29
HTML Question

Css transition with background-color

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

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