综合开发

HTML Transitions Aren't Working With Grayfade

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

HTML Transitions Aren't Working With Grayfade

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

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

HTML Transitions Aren't Working With Grayfade

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

上一篇

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

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

HTML Transitions Aren't Working With Grayfade

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