Ok guys, this is the big one; a real CSS hero slider in HTML email, complete with background/foreground content and clickable ctas! I've made some significant progress so far, but I've run in to a roadblock and was wondering if anyone here has any ideas.

I found a great CSS slider on codepen which works using content placed with <li> tags. It places the content adjacent to each other, then uses css to animate between the items.

I've set this up and it works beautifully in browsers that can read the css3. As expected however, in none css3 browsers the <li> items appear under each other as in a normal list - the hiding stipulations don't apply.

To rectify this issue, I've attached the following in-line styling to the <li> <table> and <td> tags:

style="display: none; visibility: hidden; overflow: hidden; mso-hide: all; max-height:0"

This hides the other list items beautifully in Gmail and Outlook, showing only the first slide. Of course, this means that all content in the css3 slides is now hidden too. My plan was to place stipulations in the CSS that overwrite these, so that the content is then visible only in browsers that read the CSS3.

This is where i'm stuck however; I just can't seem to get the CSS elements to overwrite the inline stipulations when needed. I've tried adding !important to them as below but it still doesn't seem to work. Can anyone spot what I'm doing wrong here? Or maybe why this method won't work at all? Any other suggestions? Thanks guys!

HTML:

    <li style="list-style: none; margin: 0; padding: 0; display: none; visibility: hidden; overflow: hidden; mso-hide: all; max-height:0">
        <table width="750" border="0" align="center" cellpadding="0" cellspacing="0" class="main" style="list-style: none; margin: 0; padding: 0; display: none; visibility: hidden; overflow: hidden; mso-hide: all; max-height:0; max-height:0">
                <tr>
                    <td width="750" class="anifix" height="350" align="center" background="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/9/EN_usa_header.png" valign="top" style='background-position: 50% 50%;  width:750px; background-image: url("http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/9/EN_usa_header.png"); background-repeat: no-repeat; background-size: cover; background-color: #555555; -webkit-background-size: cover; display: none; visibility: hidden; overflow: hidden; mso-hide: all; max-height:0'>
                        <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:750px;" style="height:350px;">
                            <v:fill type="frame" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/9/EN_usa_header.png" color="#555555" />
                            <v:textbox style="mso-fit-shape-to-text:false" inset="0,0,0,0">
                        <![endif]-->
                        <div>

CSS:

    <style>
    /*Animation - desktop*/

        ul {
          margin: 0;
          padding: 0;
        }

        li {
          list-style: none;
        }

        img {
          display: block;
        }

        .carousel {
          width: 750px;
          margin: 0 auto;
          overflow: hidden;
        }
        .carousel ul {
          display: flex;
          animation: rotate 12s infinite;
        }
        @keyframes rotate {
          0%, 16.66667% {
            transform: translateX(0);
          }
          33.33333%, 50% {
            transform: translateX(-750px);
          }
          66.66667%, 83.33333% {
            transform: translateX(-1500px);
          }
          100% {
            transform: translateX(-2250px);
          }
        }
        .carousel ul:hover {
          animation-play-state: paused;
        }

        /*Animation - mobile*/
        @media only screen and (max-width:479px)
        {
            ul {
              margin: 0;
              padding: 0;
            }

            li {
              list-style: none;
            }

            img {
              display: block;
            }

            .carousel {
              width: 310px;
              margin: 0 auto;
              overflow: inherit !important;
              display: block !important; 
              visibility: visible !important; 
              overflow: visible !important; 
              mso-hide: inherit !important; 
              max-height:none !important;
            }
            .carousel ul {
              display: flex;
              animation: rotate 12s infinite;
            }
            @keyframes rotate {
              0%, 16.66667% {
                transform: translateX(0);
              }
              33.33333%, 50% {
                transform: translateX(-310px);
              }
              66.66667%, 83.33333% {
                transform: translateX(-620px);
              }
              100% {
                transform: translateX(-940px);
              }
            }
            .carousel ul:hover {
              animation-play-state: paused;
            }
            </style>