CSS
Código:
HTML <!--codigo del menu estatico--> #nav{ font-family: 'Domine', serif; font-size:12px; height:50px; position:fixed; top:0px; left:0px; right:0px; background:#4f4c4c; border-bottom: 1px #CCC solid; } #nav ul{ height:25px; list-style:none; margin:6px auto 0px auto; width:900px; } #nav ul li{ display:inline; float:left; margin:0px 2px; } #nav a{ font-size:12px; float:left; padding: 10px 35px; color:#999; text-decoration: none; cursor: pointer; height:16px; line-height:16px; } #nav a:hover{ background:#D9D9DA none; color: #fff; } #nav a.top span, #nav a.bottom span{ float:left; width:16px; height:316px; } <!--codigo de los efectos en las imagenes--> ul.efectos { position:relative; margin:0; padding:0 } ul.efectos li { background:#F00; position:relative; list-style:none; width:226px; height:160px; overflow:hidden; float:left; margin:20px 20px 0px 10px; padding:0 } ul.efectos li:hover img { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); opacity:0.2; } ul.efectos li img { z-index:30; position:absolute; top:0; left:0; -webkit-transition:all .9s ease-out; -moz-transition:all .9s ease-out; -ms-transition:all .9s ease-out; -o-transition:all .9s ease-out } ul.efectos li h2 { font-size:18px; font-family: 'Domine', serif; color:#fff; line-height:1.0em; letter-spacing:0.2em; text-align:center; text-transform:uppercase; -webkit-transition:all .5s ease-in; -webkit-transform:scale(0.1); -moz-transition:all .5s ease-in; -moz-transform:scale(0.1); -ms-transition:all .5s ease-in; -ms-transform:scale(0.1); -o-transition:all .5s ease-in; -o-transform:scale(0.1); opacity:0; margin:0; } ul.efectos li:hover h2 { padding-top:45px; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); opacity:1 } ul.efectos li a.boton { display:block; text-align:center; font-family: 'Oswald', sans-serif; text-transform:uppercase; letter-spacing:.2em; text-decoration:none; font-size:10px; background:#333; color:#fff; width:140px; margin-left:40px; border:none; -webkit-transition:all .6s ease-in; -webkit-transform:translateY(230px) scale(5); -moz-transition:all .6s ease-in; -moz-transform:translateY(230px) scale(5); -ms-transition:all .6s ease-in; -ms-transform:translateY(230px) scale(5); -o-transition:all .6s ease-in; -o-transform:translateY(230px) scale(5); opacity:0; cursor:pointer; z-index:50; padding:10px } ul.efectos li:hover a.boton { -webkit-transform:translateY(0) scale(1); -moz-transform:translateY(0) scale(1); -ms-transform:translateY(0) scale(1); -o-transform:translateY(0) scale(1); opacity:1 }
Código:
<!-- codigo del menu estatico--> <div id="nav"> <div class="logo"><img src="img/logo.png" alt="" width="166" height="128" /></div> <ul> <A href="#">Inicio</A> <A href="#quien_soy">¿Quien soy?</A> <A href="#portafolio">Portafolio</A> <A href="#servicios">Servicios</A> <A href="#contacto">Contacto</A> </li> </ul> </div> <!-----codigo de las imagenes con efecto----> <ul class="efectos"> <li> <a href="deftones.html"><img src="img/trabajo_2.jpg" alt="" width="226" height="160" /></a> <h2>Motion Comic "Metal Gear"</h2><br /> <div class="categoria">Diseño Editorial / Folletos </div> <a class="boton" href="#" title="Haz click aquí para más información">Mas Info</a> </li> </ul>