El efecto ocurre al pasar el cursor sobre una imagen.
Este es un menu con con imagenes que tiene un efecto de zoom al pasar el cursor por encima, funciona solo con css3 al hacer el efecto Hover sobre una imagen esta aumenta su tamaño.Para llevarlo a tu sitio web sigue los siguientes pasos.
PASO 1: Copia los estilos CSS que se encuentran abajo y colocalos dentro en el <head></head>
de tu sitio, si tienes acceso a tu hoja de estilos agregalos omitiendo la eqtiueta <style>.(en jimdo entra en ajustes, vas a editar head y pegas todo y das guardar)
PASO 2: Ahora en el <body></body> de tu sitio copia y pega el código html, ( en jimdo vas a insertar nuevo modulo - widget/html y pegas el código)
NOTA: Este codigo consta de dos etiquetas que actuan como contenedores de los enlaces, dentro de cada etiqueta <a></a> en el atributo href colocas el enlace correspondiente tomando en cuenta que corresponda con la imagen que es, para ello el codigo de la imagen tiene un titulo así es mas facil identificarlo.
<a href="#url"><img src="image.png" title="home"</a>
Si quieres cambiar las imagenes ve a un sitio de iconos y busca que sean de un tamaño adecuado para tu sitio web despues copia las url de las imagenes y colocalas al codigo html.
ESTILOS CSS:
<style type="text/css">
.menuHolder {text-align:center;}
.menu_no { height:100px; display:inline-block;}
.menu_no a {display:block; float:left; width:50px; height:50px; padding:25px 5px 0 5px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.menu_no img {width:100%; display:block; border:0;}
.menu_no a:hover {width:100px; padding-top:0;}
</style>
CODIGO HTML:
<div class="menuHolder">
<div class="menu_no">
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i438a862438ba9442/1353947681/std/music.png" alt="Musica" title="musica"/></a>
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/ia74310de28e57282/1353947681/std/camera.png" alt="" title="fotos"/></a>
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i2c86c8c11d86b8f6/1353947681/std/downloads.png" alt="" title="descargas"/></a>
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i64c99ad72153425b/1353913227/std/image.png" alt="" title="aplicaciones" /></a>
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i09650ca4f87848e9/1353947681/std/movie.png" alt="" title="videos"/></a>
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i1d077330595d62b6/1353947681/std/archive.png" alt="" title="archivos"/></a>
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i0c86a26ebcf2efb8/1353947681/std/images.png" alt="" title="imagenes"/></a>
<a href="#url"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i336f1ca03618d8a3/1353947681/std/book.png" alt="" title="libro de visitas"/></a>
</div>
</div>
Escribir comentario