Tutorial:Efecto Imagen 8 ♥

Hola a todas   bueno debí haber publicado el sabado pero tenia otras cosas que hacer , asi que hoy lo estoy publicando los tutoriales que me pidieron ,este es uno ,se supone que deberia primero publicar mi reseña de un producto  por que debí hacer ase unas semanas  ,pero lo are hoy solo que no encuentro la camara  asi que con el celular nomas lo are .Hoy lo publicare la reseña y este tutorial  .El dia miercoles o jueves termina mis clases  ,pensé que era esta semana pero aun falta dar exámenes   de algunos cursos.

Bueno les dejo con este tutorial,que es un efecto para imagen como la que tengo en mi nuevo diseño ♥

Vista Previa

Para Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>

.eff8 {background-image: URL(Url de la Imagen);
width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/
opacity: 0.8;/*Opacidad */
display:inline-block;
-webkit-transition:All 0.6s ease-in-out; -moz-transition:All 0.6s ease-in-out; -o-transition:All 0.6s ease-in-out;
margin-right:1px;
border: 3px solid #92c8ba;/*borde Tamaño Tipo Color*/
}
.eff8:hover{background-position: 0 -89px;
opacity: 4.6;/*Opacidad */
border: 3px solid #fac2c2;/*borde Tamaño Tipo Color*/
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}

Para Plantilla Basica: Ir a Diseño / Añadir un gadget / HTML/Javascript y pegan el siguiente codigo
Para Plantilla Clasica o Blogskin:pegar el codigo donde deseen

<div class="eff8"></div>

¿Que tamaño tiene que tener la Imagen?
La imagen debe tener lo siguiente tal como dice en el codigo:

width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/

Las dos Imagenes deben estar juntas en una sola.

Si cambian el ancho y la altura en el codigo entonces tambien lo ponen en su imagen tal como pusieron en el codigo
-89 : Si cambian la altura por ejemplo a 100 , tambien lo cambian aqui que seria -100
Si quieren que la imagen vaya hacia abajo solo quiten el - del codigo :

background-position: 0 -89px;

quedaria :

background-position: 0 89px;

Para Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>

.efet15 {background-image: URL(Url de la Imagen);
width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/
opacity: 0.8;/*Opacidad */
display:inline-block;
-webkit-transition:All 0.6s ease-in-out; -moz-transition:All 0.6s ease-in-out; -o-transition:All 0.6s ease-in-out;
margin-right:1px;
border: 3px solid #92c8ba;/*borde Tamaño Tipo Color*/
}
.efet15:hover{background-position: -220px;
opacity: 4.6;/*Opacidad */
border: 3px solid #fac2c2;/*borde Tamaño Tipo Color*/
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}

Para Plantilla Basica: Ir a Diseño / Añadir un gadget / HTML/Javascript y pegan el siguiente codigo
Para Plantilla Clasica o Blogskin:pegar el codigo donde deseen

<div class="efet15"></div>

¿Que tamaño tiene que tener la Imagen?
La imagen debe tener lo siguiente tal como dice en el codigo:

width: 220px;/*Ancho de la Imagen*/
height: 89px;/*Altura de la Imagen*/

Las dos Imagenes deben estar juntas en una sola.

Si cambian el ancho y la altura en el codigo entonces tambien lo ponen en su imagen tal como pusieron en el codigo
-220 : Si cambian la altura por ejemplo a 300 , tambien lo cambian aqui que seria -300
Si quieren que la imagen vaya hacia la derecha solo quiten el - del codigo :

background-position: -220px;

quedaria :

background-position: 220px;

Y listo ♥