title: CSS3 effect not working on IE8
body: <p>I made a pretty nice looking effect with some help from a website which works in every explorer expect for IE8-7 etc.. I researched and found that modernizer could help but didn't get it to work... here's the code...</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;script type="text/javascript" src="modernizr.custom.13486.js"&gt;&lt;/script&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;.
  &lt;title&gt;Amazing CSS3 Image Hover Over Boxes, Using Transitions.&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="square.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div id="center"&gt;
  
   &lt;ul class="custom-menu"&gt; 
  &lt;li&gt;    
      &lt;a href="#"&gt;
          &lt;div class="content"&gt; 
          &lt;h2 class="link"&gt;Nivel Basico&lt;/h2&gt;
          &lt;h3 class="secondary"&gt;Aprenderás&lt;/h3&gt; 
          &lt;p class="info"&gt;&lt;img src="images/Flaticon_43130(1).png"  /&gt;&lt;/p&gt;
          &lt;p class="icon" &gt;Es capaz de comprender y utilizar expresiones cotidianas de uso muy frecuente, así como frases sencillas destinadas a satisfacer necesidades de tipo inmediato. Puede presentarse a si mismo y a otros, pedir  y dar información persona básica sobre su domicilio, sus pertenencias y las personas que conoce, Puede relacionarse de forma elemental siempre que su interlocutor hable despacio y con claridad y esté dispuesto a cooperar. &lt;/p&gt;
          &lt;/div&gt;
      &lt;/a&gt; 
  &lt;/li&gt; 
  
  
    &lt;li class="custom-menu1"&gt; 
      &lt;a href="#"&gt;
           &lt;div class="content"&gt; 
           &lt;h2 class="link"&gt;Nivel Intermedio&lt;/h2&gt;
           &lt;h3 class="secondary"&gt;Aprenderás&lt;/h3&gt; 
           &lt;p class="info"&gt;&lt;img src="images/Flaticon_43075.png" /&gt;&lt;/p&gt;
  &lt;p class="icon"&gt; Es capaz de comprender los puntos principales      de     textos  claros y en la lengua estándar si tratan sobre  cuestiones que le son   conocidas ya sea en situaciones de trabajo de estudio o de ocio, sabe desenvolverse en la mayor parte de las situaciones que pueden surgir durante un viaje por zonas donde se utiliza la lengua. Es capaz de producir textos sencillos y coherentes sobre temas que le son familiares o en lo que tiene un interés persona.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt; 
      &lt;/li&gt; 
  
  
  
     &lt;li class="custom-menu2"&gt;    
      &lt;a href="#"&gt;
          &lt;div class="content"&gt; 
          &lt;h2 class="link"&gt;Nivel Avanzado&lt;/h2&gt;
          &lt;h3 class="secondary"&gt;Aprenderás&lt;/h3&gt;
          &lt;p class="info"&gt;&lt;img src="images/Flaticon_47028.png" /&gt;&lt;/p&gt; 
          &lt;p class="icon" &gt; Es capaz de comprender con facilidad       prácticamente todo lo que oye o lee. Sabe reconstruir la información y los argumentos procedentes de diversas fuentes, ya sean en lengua hablada o escrita, y presentarlos de manera coherente y resumida.
  Puede expresarse espontáneamente, con gran fluidez y con un grado de precisión que le permite diferenciar pequeños matices de significado incluso en situaciones de mayor complejidad.&lt;/p&gt;          
          &lt;/div&gt;
        &lt;/a&gt; 
  &lt;/li&gt; 
   &lt;/ul&gt; 
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and  here is the CSS</p>
  
  <pre><code>#center { 
  
     margin:  0px 0px 0px 0px;  
  
  }
  
  
  .custom-menu {
     margin:  0px 0px 0px 0px;  
     height: 400px; 
     width: 86%;
  }   
  
  .custom-menu ul {margin: 0 0 0 -4px;}
  
  .custom-menu li { 
     width: 250px;
     height: 300px;
     overflow: hidden;
     position: relative;
     float: left;
     background: #fff;
     margin: 0px 0px 0px 0px; 
     border: 2px solid #e3e3e3;
     border-radius: 1px; 
     transition: 500ms; 
     -webkit-transition: 500ms; /* Safari &amp; Chrome */
     -o-transition: 500ms; /* Opera */ 
     -moz-transition: 500ms; /* Old firefox */
  
   } 
  
  .custom-menu li a { 
     text-align: center; 
     text-decoration: none; 
     border-style: none; 
  } 
  
  
  .custom-menu li:hover {
     border: 3px solid #29abe2;
     background-color: #014B67;
  } 
  
  
   .content { 
      margin-top: 12px; 
   } 
  
   .link { 
      font-size: 23px; 
      margin-top: 10px;
      color: #29ABE2;   
      transition: 500ms; 
     -webkit-transition: 500ms;  /* Safari &amp; Chrome */
     -o-transition: 500ms;   /* Opera */ 
     -moz-transition: 500ms;  /* Old firefox */
  }
  
  .custom-menu li:hover .link {
     color: #fff; 
     font-size: 18px; 
  }
  
  .secondary { 
     margin-top:-75px;
     color: #fff; 
     transition: 500ms;
     -webkit-transition: 500ms; /* Safari &amp; Chrome */
     -o-transition: 500ms; /* Opera */ 
     -moz-transition: 500ms; /* Old firefox */
  } 
  
  
  .custom-menu li:hover .secondary { 
     background-color: #29abe2; 
     height: -70px; 
     padding-top: 4px; 
   } 
  
  .info { 
     font-size: 18px; 
     color: #014B67;
     margin-top: 59px;  
     padding: 18px; 
     transition: 500ms;
     -webkit-transition: 500ms; /* Safari &amp; Chrome */ 
     -o-transition: 500ms; /* Opera */ 
     -moz-transition: 500ms; /* Old Firefox */
  } 
  
  .custom-menu li:hover .info {
     transform: translateX(-400px) rotate(360deg); 
     -webkit-transform: translateX(-400px) rotate(360deg); /* Safari &amp; Chrome */
     -o-transform: translateX(-400px) rotate(360deg);  /* Opera */
     -moz-transition: translateX(-400px) rotate(360deg);  /* Old Firefox */ 
  }
  
  .icon { 
     transition: 500ms; 
     -webkit-transition: 500ms; /* Safari &amp; Chrome */  
     -o-transition: 500ms; /* Opera */ 
     -moz-transition: 500ms; /* Old Firefox */ 
     transform: translate(-300px) rotate(360deg);
     -webkit-transform: translate(-300px) rotate(360deg); /* Safari &amp; Chrome */ 
     -o-transform: translate(-300px) rotate(360deg); /* Opera */ 
     -moz-transform: translate(-300px) rotate(360deg); /* Old Firefox */ 
  } 
  
  .custom-menu li:hover .icon { 
     font-size: 14px;
     font-family: Arial;
     color:white;
     text-align:justify;
     margin: 4px 4px 4px 4px;
     transform: translateY(-115px) rotate(0deg); 
     -webkit-transform: translateY(-115px) rotate(0deg); /* Safari &amp; Chrome */ 
     -o-transform: translateY(-115px) rotate(0deg); /* Opera */
     -moz-transform: translateY(-206px) rotate(0deg); /* Old Firefox */ 
  } 
  
  /* Colors */ 
  li.custom-menu1:hover { 
  background-color: #009878;
  }
  li.custom-menu2:hover { 
  background-color: #B0232A;
  } 
  li.custom-menu3:hover {
  
  } 
  </code></pre>
  
  <p>So.. it should work now on IE8, right? or am I missing something here?</p>