综合编程

HTML Transitions Aren't Working With Grayfade

微信扫一扫,分享到朋友圈

HTML Transitions Aren't Working With Grayfade
0

What I’m trying to do is hover over my picture and then have it gradually fade to gray using the grayfade CSS stuff. It’s not working for some reason that I don’t know even though I have looked for hours on transitions. Please help me!

This is all of my code (although the code that you’ll want to look at is the img and the img:hover in the style tag):

<!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  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 s Basketball" alt="1970 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 s Basketball" alt="1980 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 s Basketball" alt="1990 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 s Basketball" alt="2000 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 s Basketball" alt="2010 s Basketball">
                </a>

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

Thanks in advance for helping me with my transition-grayfade problem!

Problem courtesy of: user2803078

Solution

Re-order the transition
properties, it seems like there was some interference. Placing transition: filter 0.5s ease
first seemed to fix it. I assume this had to do with the fact that it was overwriting the other prefixed-properties.


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

This doesn’t occur when using all
, (example)
therefore I assume there was an issue use -webkit-filter
as a property value. I guess it’s a browser support related issue.

Solution courtesy of: Josh Crozier

阅读原文...


CSS3 Recipes

华为将发布全球首个5G+五星购物中心

上一篇

新研究指出:大型持有者对以太币价格的影响很有限

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
HTML Transitions Aren't Working With Grayfade

长按储存图像,分享给朋友