<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de movimiento de un div de abajo hacia arriba con transition de css3</title>
<meta name="description" content="Ejemplo de movimiento de un div de abajo hacia arriba con transition de css3">
<style>
.box { display: inline-block;
overflow: hidden;
position: relative;
width:200px;
height:200px;
}
/* definimos la capa oculta que se movera por la pantalla al pasar el
raton por encima de la capa "box" */
.box .hidden { background: black;
color:#fff;
height: 200px;
width: 200px;
position: absolute;
top:200px; /* indicamos que la capa inicialmente el top esta al final de la misma */
opacity: 0.8;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
padding:10px;
}
/* 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 posicion top=0 */
.box:hover .hidden { top: 0px;
}
</style>
</head>
<body>
<h1>Ejemplo de movimiento de un div de abajo hacia arriba con transition de css3</h1>
<div class="box">
<img src="http://www.lawebdelprogramador.com/codigo/jquery.preview1/jquery.preview_1.jpg">
<div class="hidden">Texto de la capa (1)</div>
</div>
<div class="box">
<img src="http://www.lawebdelprogramador.com/codigo/jquery.preview1/jquery.preview_1.jpg">
<div class="hidden">Texto de la capa (2)</div>
</div>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: Versión 1.0 (1)