如何將CSS3轉換添加到圖像疊加？

我想弄清楚如何給一個半透明的圖像覆蓋（出現在：懸停）一個CSS3過渡（輕鬆）。但它不起作用。我不確定這是因爲我錯過了什麼，或者如果轉換隻是不適用於顯示屬性。任何想法的CSS解決方法（我不知道JavaScript）？提前致謝。如何將CSS3轉換添加到圖像疊加？

相關的HTML和CSS：

<div class="thumbnail"> 
    <figure> 
     <img src="images/dude.jpg" alt=""/> 
    </figure> 
    <div class="thumbnail-overlay"> 
     <h2>Project Name</h2> 
     <h3> Skills Skills Skills</h3> 
     <p>This is a project description.</p> 
    </div> 
</div> 

.thumbnail { 
    position:relative; 
    float:left; 
    width:40%; 
    margin:1.5% 1.5% 0 0; 
} 

.thumbnail-overlay { 
    background-color: @dark-gray; 
    display:none; 
    opacity:.9; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; height:100%; 
    overflow:hidden; 
    -webkit-transition:all .3s ease; 
    -moz-transition:all .3s ease; 
    transition:all.3s ease; 
} 


.thumbnail:hover .thumbnail-overlay { 
    display:block; 
}

來源

2013-07-31 Bryce Johnson

display屬性不能動畫（只有兩個狀態）。但不透明，甚至可見度可以。 –

這可能會幫助你

<div class="tricky"><img class="tricky_image" src="http://distilleryimage11.instagram.com/65c8f832841711e180d51231380fcd7e_7.jpg"></div>

css部分：

.tricky { 
    display:inline-block; 
    max-width:200px; 
    max-height:200px; 
    background:red; 
} 

.tricky_image { 
    max-width:200px; 
    max-height:200px; 
    -moz-transition: all 1s; 
    -webkit-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
    opacity:1; 
    filter:alpha(opacity=100); 
} 

.tricky_image:hover { 
    opacity:0.2; 
    filter:alpha(opacity=20); 
}

來源

2013-07-31 07:12:41 krishna

適用於跨瀏覽器支持。儘管我也設置了可見性屬性。 –

謝謝！正是我需要的！如果我有足夠的聲望，我會贊成答案:) –

嗨@BryceJohnson - 如果您認爲這是最正確的答案，那麼將其標記爲已接受。點擊此處查看更多信息：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#answer-5235 – 3dgoo

，我看到那是因爲display屬性。 css過渡不適用於它，這就是爲什麼你有這個問題。

這裏是CSS代碼，我測試工作的確定：

.thumbnail .thumbnail-overlay { 
background-color: @dark-gray; 
display:block; 
opacity:0; 
position:absolute; 
top:0; 
left:0; 
width:100%; height:100%; 
overflow:hidden; 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
transition: all 0.3s ease; 
} 

.thumbnail:hover .thumbnail-overlay { 
opacity: .9; 
}

希望它幫助！

來源

2013-07-31 06:11:56

它正在爲我，我分隔的CSS到另一個文件，並將其鏈接到HTML file.It的作品很好，我

HTML

<head> 
     <link rel="stylesheet" type="text/css" href="test.css"> 
    </head> 
    <div class="thumbnail"> 
     <figure> 
      <img src="/home/qbadmin/Downloads/Pic.jpg" alt=""/> 
     </figure> 
    <div class="thumbnail-overlay"> 
     <h2>Project Name</h2> 
     <h3> Skills Skills Skills</h3> 
     <p>This is a project description.</p> 
    </div> 
</div>

CSS

.thumbnail { 
     position:absolute; 
     float:left; 
     width:40%; 
     left :100 px; 
     top :100px; 
     margin:1.5% 1.5% 0 0; 
     } 

    .thumbnail-overlay { 
    background-color: @dark-gray; 
    display:none; 
    opacity:.9; 
    position:absolute; 
    top:100px; 
    left:100px; 
    width:100%; height:100%; 
    overflow:hidden; 
    -webkit-transition:all .3s ease; 
    -moz-transition:all .3s ease; 
     transition:all.3s ease; 
     } 

    .thumbnail:hover .thumbnail-overlay { 
     display:block; 
     opacity: .9; 
     }

來源

2013-07-31 06:12:53

這隻適用於「展示」動畫，而不適用於「隱藏」動畫... –

如何將CSS3轉換添加到圖像疊加？

回答

相關問題