por edward leal Mar Dic 07, 2010 6:59 pmEn este tutorial mostrare como colocar un contenido deslizante a una imagen sin hacer uso de scripts, solamente con css 3.
Para empezar les dejo el código css:
Ahora les coloco el código htnl:
Demostración.
Nota: para ver el efecto deben pasar el mouse sobre la imagen.
Captura:
Para empezar les dejo el código css:
- Código:
.wrap a {display:block; width:220px; height:220px; text-decoration:none; color:#000;}
.wrap {width:220px; height:220px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;}
.wrap img {border:0;}
.wrap i {display:block; width:220px; height:220px; position:absolute; left:0; top:190px; z-index:1; background:#000; filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap p {display:block; width:220px; height:220px; position:absolute; left:0; top:190px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap p b {display:block; font-size:22px; color:#ff0000; text-align:center; margin:0; padding:0; line-height:30px;}
.wrap p span {display:block; padding:10px; line-height:20px;}
.wrap a:hover {direction:ltr;}
.wrap a:hover i {top:0;}
.wrap a:hover p {top:0;}
.clear {clear:left;}
Ahora les coloco el código htnl:
- Código:
<div id="info">
<h2>Informacion deslizante</h2>
<h3>27 de enero del 2010</h3>
<div class="wrap">
<a href="#x">
<img src='http://img42.xooimage.com/files/7/c/6/aguilax-2337575.png' alt='' />
<i></i>
<p>
<b>Aguilas del Zulia</b>
<span>Las Águilas del Zulia es un equipo de béisbol perteneciente a la Liga Venezolana de Béisbol Profesional, en Venezuela, con sede en el Estadio Luis Aparicio el Grande de Maracaibo, y considerado uno de los equipos más seguidos de la pelota de ese país.
</span>
</p>
</a>
</div> <!-- end wrap -->
<div class="wrap">
<a href="#x">
<img src='http://img44.xooimage.com/files/1/8/b/aguipet-23376c7.jpg' alt='' />
<i></i>
<p>
<b>Agui, la mascota</b>
<span>Agui, la popular mascota del equipo Águilas del Zulia, recibió una suspensión de 10 juegos por un altercado ocurrido en el juego del 19 de Noviembre contra Cardenales de Lara.
</span>
</p>
</a>
</div> <!-- end wrap -->
<br class="clear" />
</div>
Demostración.
Nota: para ver el efecto deben pasar el mouse sobre la imagen.
Captura:
The Exiles
