Css過渡與背景顏色

我有一個圖像與懸停的黑暗覆蓋。這可以工作，但我希望背景能夠滑入。我試着過渡和背景表演做，但是在不滑動。這是我的代碼Css過渡與背景顏色

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

任何建議如何做這個？

來源

2016-07-28 MariaL

你的意思是你想有色覆蓋滑到你的DIV /圖像？我猜''hover_test'（在CSS中）vs'hover_text'（在HTML中）只是一個錯字，對嗎？ – webeno

是的，確切地說。但也有一些文字覆蓋在彩色覆蓋層上，只有在徘徊時纔會出現。是的忘了擺脫那個hover_text類 – MariaL

你只需要轉換背景顏色，你需要爲位置添加另一個轉換，即頂部，左邊。 – DirtyRedz

試試這個：

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

來源

2016-07-28 09:19:38

輝煌，謝謝！ – MariaL

最受歡迎:) –

Css過渡與背景顏色

回答

相關問題