HTML-переходы не работают с Grayfade

То, что я пытаюсь сделать, - навести на мою фотографию, а затем постепенно постепенно исчезать до серого, используя материал CSS серого цвета. По какой-то причине это не работает, и я не знаю, хотя я искал часы на переходах. Пожалуйста, помогите мне!HTML-переходы не работают с Grayfade

Это все из моего кода (хотя код, который вы хотите посмотреть на это IMG и IMG: парить в теге стиле):

<!doctype html> 

<html> 
    <head> 
    <title>Basketball Uniforms 1/24/14</title> 
    <style> 
     * { 
      margin: 0; 
      font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; 
     } 

     html { 
      background: url(assets/background.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
     } 

     header { 
      width: cover; 

      padding: 2em; 

      background-color: rgba(17, 40, 87, 0.85); 

      border-radius: 0 0 2em 2em; 
     } 

     h1 { 
      text-align: center; 
      vertical-align: middle; 

      color: #FFBB00; 
     } 

     h2 { 
      text-align: center; 
      vertical-align: middle; 

      color: #FFBB00; 
     } 

     h3 { 
      text-align: center; 
      vertical-align: middle; 

      color: #FFBB00; 
     } 

     table { 
      margin-left: auto; 
      margin-right: auto; 

      border-collapse: separate; 
      border-spacing: 0 2em; 
     } 

     td {    
      border-style: groove; 
      border-width: 2em; 
      border-color: rgba(59, 59, 59, 0.95); 
      border-radius: 4em; 

      padding: 4em; 
     } 

     .odd { 
      background-color: rgba(242, 153, 51, 0.80); 
      color: #22499C; 
     } 

     .even { 
      background-color: rgba(51, 112, 242, 0.80); 
      color: #FEBB2D; 
     } 

     img { 
      width: 26em; 
      height: 20em; 

      border-radius: 1em; 

      -webkit-transition: -webkit-filter 0.5s ease; 
      -moz-transition: -moz-filter 0.5s ease; 
      -ms-transition: -ms-filter 0.5s ease; 
      -o-transition: -o-filter 0.5s ease; 
      transition: filter 0.5s ease; 
     } 

     img:hover { 
      -webkit-filter: grayscale(100%); 
      -moz-filter: grayscale(100%); 
      -ms-filter: grayscale(100%); 
      -o-filter: grayscale(100%); 
      filter: grayscale(100%); 
      filter: url(assets/grayscale.svg); 
      filter: gray; 
     } 

     h4 { 
      padding-top: 1em; 

      text-align: center; 
     } 

     h5 { 
      text-align: center; 
     } 

     footer { 
      width: cover; 

      padding: 2em; 

      background-color: rgba(17, 40, 87, 0.85); 

      border-radius: 2em 2em 0 0; 
     } 
    </style> 
</head> 
<body> 
    <header> 
     <h1>Basketball Uniforms Through the Ages</h1> 
     <h2>Leo Alfred&#58; 1/24/2013</h2> 
    </header> 

    <table> 
     <tr> 
      <td class="odd"> 
       <a href="http://uniformcritics.com/basketball/nba/portland-trail-blazers/1970-trail-blazers-debut-road-uniform-vintage-retro-throwback/"> 
        <img src="assets/1970.jpg" title="1970&#39;s Basketball" alt="1970&#39;s Basketball"> 
       </a> 

       <h4>Portland Trail Blazers</h4> 
       <h5>1970 - 1971 Debut Road Uniform</h5> 
      </td> 
     </tr> 
     <tr> 
      <td class="even"> 
       <a href="http://uniformcritics.com/basketball/nba/golden-state-warriors/1980s-warriors-away-california-uniform-vintage-retro-throwback/"> 
        <img src="assets/1980.jpg" title="1980&#39;s Basketball" alt="1980&#39;s Basketball"> 
       </a> 

       <h4>Golden State Warriors</h4> 
       <h5>1980 - 1985 Road Uniform</h5> 
      </td> 
     </tr> 
     <tr> 
      <td class="odd"> 
       <a href="http://uniformcritics.com/basketball/nba/milwaukee-bucks/1990s-bucks-road-uniform-throwback/"> 
        <img src="assets/1990.jpg" title="1990&#39;s Basketball" alt="1990&#39;s Basketball"> 
       </a> 

       <h4>Milwaukee Bucks</h4> 
       <h5>1993 - 2005 Road Uniform</h5> 
      </td> 
     </tr> 
     <tr> 
      <td class="even"> 
       <a href="http://uniformcritics.com/basketball/nba/la-clippers/2000s-clippers-away-uniform-red/"> 
        <img src="assets/2000.jpg" title="2000&#39;s Basketball" alt="2000&#39;s Basketball"> 
       </a> 

       <h4>LA Clippers</h4> 
       <h5>2000 - 2009 Away Uniform</h5> 
      </td> 
     </tr> 
     <tr> 
      <td class="odd"> 
       <a href="http://www.spartanjerseys.com/michigan-state-basketball-jersey/2010-2011/"> 
        <img src="assets/2010.jpg" title="2010&#39;s Basketball" alt="2010&#39;s Basketball"> 
       </a> 

       <h4>Michigan State Spartans</h4> 
       <h5>2010-2011 Uniform</h5> 
      </td> 
     </tr> 
    </table> 
    <footer> 
     <h2>An LFX Design Website</h2> 
     <h3>&#169; 2014 LFX Design</h3> 
    </footer> 
</body> 
</html>

Заранее спасибо за помощь мне моя проблема переходного серого цвета!

источник

2014-01-25 Anonymous

Перепечатайте transition свойства, похоже, было какое-то вмешательство. Помещение transition: filter 0.5s ease сначала, казалось, исправить. Я предполагаю, что это связано с тем, что он переписывал другие префиксные свойства.

EXAMPLE HERE

img { 
    transition: filter 0.5s ease; 
    -moz-transition: -moz-filter 0.5s ease; 
    -ms-transition: -ms-filter 0.5s ease; 
    -o-transition: -o-filter 0.5s ease; 
    -webkit-transition: -webkit-filter 0.5s ease; 
} 

img:hover { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: url(assets/grayscale.svg); 
    filter: gray; 
}

Это не происходит при использовании all, (example) поэтому я предполагаю, что была проблема использования -webkit-filter в качестве значения свойства. Я думаю, это проблема, связанная с поддержкой браузера.

источник

2014-01-25 06:15:22

Большое спасибо! Это сработало! –

HTML-переходы не работают с Grayfade

ответ

Смежные вопросы