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

Css过渡与背景颜色

1 个答案: