Tutorial ~Efecto/menu para friends o autoras~


(me hace las imagenes de mala calidad Blogger!!)

Hola!Bueno las del evento me faltan 2 regalos que faltan entregar nomas y publico la entrada~
Bueno Aww estoy tan feliz porque hace muucho pero mucho tiempo no publico un
tutorial!Lo cierto es que quería publicar un original que sea mío pero estoy escasa de ideas
Entonces traigo este efecto que está lindo!
Empezemos~


1er Paso:
No tengo vista previa pero les juro que queda genial!

Van a Plantilla► Editar HTML► Ctrl + f:

]]></b:skin>

.view {
cursor: pointer;
height: ALTURApx;/* Cambiala a la medida de tus imagenes */
margin: 1px;
overflow: hidden;
position: relative;
text-align: center;
width: LARGURApx;/* Cambiala a la medida de tus imagenes */
display: inline-block;
}
.view img { /* a imagem */
display: inline-block;
position: relative;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se "anima quando passamos o mouse em cima */
-moz-transform: rotate(620deg) scale(0);
-webkit-transform: rotate(620deg) scale(0);
-o-transform: rotate(620deg) scale(0);
-ms-transform: rotate(620deg) scale(0);
transform: rotate(620deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask {
background-color: #CORDOFUNDO;/* Color del fondo del link */
height: ALTURApx;  /* Altura del link */
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: LARGURApx;     /* Altura del link */
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);}
.view h4 {
background-color: #CORDAFAIXA; /* Color de el fondo del titulo */
opacity: 0.8;
color: #CORDOTÍTULO; /*El color del titulo del nombre  */
text-align: center;
position: relative;
font-family: handy;
text-transform: uppercase;
font-size: 8px;
margin: 9px 0 0 0;
padding: 5px 0;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* título é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* o texto permanece oculto */
color: #fd0505;
font-family: pf arma five;
font-size: 8px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* texto é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* o link permanece oculto */
background-color: #CORDOBOTÃO; /* Link del boton oculto */
border-radius: 5px;
box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;
color: #FFF;
display: inline-block;
padding: 2px 10px;
text-decoration: none;
margin-top: 8px;
font-family: handy;
font-size: 8px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #968ca3;
}
.view:hover a.info { /* link é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

Editamos:
Todo esta editado bien como se explica 
creo que se entiende 
igual algunas partes no sé si esta bien como decirlo...Dicho, 
igual puedes ir jugando con los colores♥

2do paso:

Ahora para que tu código funcione en las imagenes
copia el siguiente código y pegalo en un gadget HTML/JAVASCRIPT:
 <div class="view"><img src="URL DA FOTO" /><div class="mask"><h4>NOME</h4><a href="LINK" class="info">Visite!</a></div></div>
Para agregar más imágenes agrega el
el mismo código cada vez que quieras♥
Y eso a sido todo por hoy!
Gracias por leer la entrada!
Y tu comentario me haría muy bien!
Hoy tengo tiempo asi que los responderé!
No estoy publicando pero ya vendré con algo
que les tenía preparado hace tiempo!
Besotes!

Si tienes dudas sobre el tutorial:
puedes dejar tu pregunta o duda

(Encontré esta firma echa por mi y la había olvidado!)
 Credits..

16 comentarios:

  1. Muchas gracias por esta tutorial^^
    saludos~

    ResponderEliminar
    Respuestas
    1. Gracias por ver la entrada!^^
      Besos!

      //Larita///

      Eliminar
  2. pobre el código y la verdad si esta bien bonito :)
    saludos

    ResponderEliminar
    Respuestas
    1. Si el código super largo!
      Si muy largo pero es algo bonito! ♥

      Larita///

      Eliminar
  3. holaa! que buen codigo, venia a decirte que ya estas afiliada
    besos^^

    ResponderEliminar
  4. Listo... afiliación corregida :3 Disculpa, pero llevo poco mas de medio mes ausente del blog y pues... upss :(

    ResponderEliminar
    Respuestas
    1. No lo sabía me tuve que fijar gracias por informarme que ya lo arreglaste! espero que no haya sido tanta problema Besos!~

      //Larita//

      Eliminar
  5. Muy lindo tutorial, gracias por compartirlo ;)
    Saludos~

    ResponderEliminar
    Respuestas
    1. Gracias a ti por ver la entrada! ^^

      //Larita//

      Eliminar
  6. Gracias por el tutorial, luego lo probare en mi blog *o*

    ResponderEliminar
  7. Bueenas.
    Te he nominado para un pequeño premio ^^
    http://otaku-kawaii-queen.blogspot.com.es/2014/08/blog-anime-premio.html
    Te sigoo
    Byees

    ResponderEliminar
  8. Tienes un premiuu^^ http://misslucya.blogspot.com.es/2014/08/premiuu.html
    Sigue así :)

    ResponderEliminar
  9. Hola quieres aumentar tus visitas?
    estamos ofreciendo gratis nuestra aplicacion web
    para los que usais blogger

    tan sollo te tomara 2 minutos :)
    www.visitasvirales.tk/

    ResponderEliminar
  10. Lari cuando vas a publicar los regalos de amigos de blogger'

    ResponderEliminar
  11. me interesa el tutorial pero ¿tienes aguna vista previa de como queda por ahi? poooorfis

    ResponderEliminar

Hola! Si estas a punto de comentar me alegra mucho♥ Recuerda cumplir las reglas para evitar que borre tu comentario
~No digas malas palaras.
~No hagas SPAM.
~La afiliación se pide por la cbox o entrando en la pag de links
~Disfrutar porque es también tu lugar (^3^)/

HomeAfilieHelps 4 youPublicityLayouts Free