[TUTORIAL] Créditos de Plantilla (1) cajita hover ♥

Hooola designers' ¿Que taal andan? ^^

Yo bieeen aquí con tanto tutorial para su blog♥

La verdad existen muchos estilos de créditos de plantilla ...

osea colocamos gracias a quién producimos la plantilla 

los recursos  , imagenes  tutos y todo :)-

Bueno este es el 1º estilo  ;

así esta ... y al pasar el cursor esta así

tiene una transcisión muy bonita ^^

Espero que les guste 

¡comenzemos!

1. Vamos a plantilla 
2. EDITAR HTML
3. Presionamos CTRL + F y buscamos el sig. código

]></b:skin>

ahora antes de el código colocamos este código largo :l

/*Credits ----------------------------------------------- */ @font-face{font-family:tinytots;src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf')} .view { cursor: pointer; height: 124px; /* Alto de la imagen */ margin: 1px; overflow: hidden; position: relative; text-align: center; width: 230px; /* Ancho de la imagen */ display: inline-block; } .view img { 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 { -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: #9982ad; /* Color de fondo */ height: 124px; left: 0; position: absolute; overflow: hidden; top: 0; width: 200px; -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: #ffffff; /* Color de fondo del título */ opacity: 0.8; color: #75648b; /* Color del texto del título */ 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 { -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 { color: #fff; /* Color del texto/descripción/etc xD */ font-family: tinytots; text-transform: uppercase; 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 { -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 { background-color: #ffffff; /* Color de fondo del menú */ font-family: tinytots; border-radius: 5px; box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset; color: #000; /* Color de texto del menú */ 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 { font-family: tinytots; -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; }

                                       ahora van a Diseño , añadir gadget , html JavaScript y pegan y guardan el sig. código

 <div class='view img'><img src='Imagen de los creditos' style='border-top: # solid 0px;border-bottom: # solid 0px;border-right: #ffb1dc solid 0px;border-left: # solid 0px; -Moz-border-radius: 10px; border-radius: 10px;'/>
<div class='mask'>
<h4>CREDITOS</h4>
  <p>Designer: <a class='info' href='url del blog del diseñador'>Nombre del Autor</a><br/>Images: <a class='info' href='url del sitio de las imagenes'>Nombre del sitio</a><br/>Others: <a class='info' href='url del blog'>X</a> <a class='info' href='url del blog'>X</a> <a class='info' href='url del blog'>X</a></p>
</div></div></div>

& Listo personalizan ^u^

Espero que les haya gustado nos vemos la próxima 

Bye bye♥