<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo del movimiento de un div con transition de css3</title>
<meta name="description" content="Ejemplo de la utilización del transition con CSS3">
<style>
.box { display: inline-block;
overflow: hidden;
position: relative;
}
.hidden { margin-top:35px;
}
/* definimos la capa oculta que se movera por la pantalla al pasar el
raton por encima de la capa "box" */
.box .hidden { background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
opacity: 1;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
width: 500px;
}
/* definimos la posicion de la capa cuando se pasa por encima de la clase
box. Como esta definido que tiene una transicion, realizara el movimeinto
hasta la paosicion left=0 */
.box:hover .hidden { left: 0px;
}
</style>
</head>
<body>
<h1>Ejemplo del movimiento de un div con transition de css3</h1>
<div class="box">
<img src="http://www.lawebdelprogramador.com/codigo/jquery.preview1/jquery.preview_1.jpg">
<div class="hidden"></div>
</div>
</body>
</html>
Crear cuenta
