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...
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="modernizr.custom.13486.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">.
<title>Amazing CSS3 Image Hover Over Boxes, Using Transitions.</title>
<link rel="stylesheet" type="text/css" href="square.css">
</head>
<body>
<div id="center">
<ul class="custom-menu">
<li>
<a href="#">
<div class="content">
<h2 class="link">Nivel Basico</h2>
<h3 class="secondary">Aprenderás</h3>
<p class="info"><img src="images/Flaticon_43130(1).png" /></p>
<p class="icon" >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. </p>
</div>
</a>
</li>
<li class="custom-menu1">
<a href="#">
<div class="content">
<h2 class="link">Nivel Intermedio</h2>
<h3 class="secondary">Aprenderás</h3>
<p class="info"><img src="images/Flaticon_43075.png" /></p>
<p class="icon"> 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.</p>
</div>
</a>
</li>
<li class="custom-menu2">
<a href="#">
<div class="content">
<h2 class="link">Nivel Avanzado</h2>
<h3 class="secondary">Aprenderás</h3>
<p class="info"><img src="images/Flaticon_47028.png" /></p>
<p class="icon" > 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.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
and here is the CSS
#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 & 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 & 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 & 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 & 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 & Chrome */
-o-transform: translateX(-400px) rotate(360deg); /* Opera */
-moz-transition: translateX(-400px) rotate(360deg); /* Old Firefox */
}
.icon {
transition: 500ms;
-webkit-transition: 500ms; /* Safari & Chrome */
-o-transition: 500ms; /* Opera */
-moz-transition: 500ms; /* Old Firefox */
transform: translate(-300px) rotate(360deg);
-webkit-transform: translate(-300px) rotate(360deg); /* Safari & 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 & 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 {
}
So.. it should work now on IE8, right? or am I missing something here?
