[TUTORIALES]4 Efectos para tus imagenes.

Hola~!!Como estan?Pues yo aqui que la pase muy bien en el dia de los padres,Solo lo pase con mi papa &  mi mama.{Si,Paso algo en el blog?}Bueno como ven hay nuevo diseño,y la verdad pienso que se va a quedar asi por un tiempo....Les cuento,el diseño anterior era mas como de prueba,mientras hacia este...Mi personaje escogido fue*tambores por favor*"LUHAN"de exo,{ultimamente me estoy odsesionando con ellos}Bueno mi madre queria que pusiera a kris,pero luhan se ve mas cute con estos colores{no queria cambiar el estilo de kris XD}Ademas hace tiempito queria poner estos colores...Yo espero que les guste?~!{Mas vale que si,por que me duele el cuello...}Pues estoy haciendo unos recursos,ademas ya subi todos los capitulos de "Pupa".y Pues he pensado en un proyecto...Es sobre blogger{aunque paso algo horrible con mi comic}Cuando haga la entrada todos lo sabran,Bueno hoy les traigo 4 efectos para sus imagenes,Pues vamos a empezar:

1.Efecto Black#1:

[LIVE PREVIEW]

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>

-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.

img{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

transition: all .7s linear;

}

img:hover{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

-webkit-filter: brightness(15%);

z-index: -100px;

}

2.Efecto Circle#2:

[LIVE PREVIEW]

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>

-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.

img:hover{

-webkit-animation-name: MMCa2;

-webkit-animation-duration: 5s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}

@-moz-keyframes MMCa2 /* Firefox*/

{

{ -ms-transform:: translate(0px, 0px) rotate(0deg); }

 50% { -moz-transform:  translate(0px, 0px) rotate(360deg); }

}

@-ms-keyframes MMCa2 /* IE9*/

{

  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }

 50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }

}

@-webkit-keyframes MMCa2 /* Safari and Chrome */

{

  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }

 50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }

}

</style>

-Abrimos un gadget o en alguna entrada y pegas el siguinte codigo:

 <img src="URL IMAGEN" style="height: 400px; width: 400px;border-radius:9999px;" />

</div>

3.Efecto Reflejo:

[LIVE PREVIEW]

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>

-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.

img{

padding:4px;

-webkit-box-reflect: below 0px -webkit-gradient

(linear, left top, left bottom, from(transparent),

color-stop(.7, transparent), to(rgba(0,0,0,0.1)))

-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;

}

img:hover{

opacity: 1;-webkit-box-reflect: below 0px

-webkit-gradient(linear, left top,

 left bottom, from(transparent),

color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

}

4.Efecto Line:

[LIVE PREVIEW] 

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>

-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.

img{

background:transparent:

box-shadow:inset 0 0px 0px #FCDFFF;

-webkit-transition: all 0.8s ease-out;

-moz-transition: all 0.8s ease-out;

transition: all 0.8s ease-out;

padding:5px;

border:1px solid #FE2E64;

}

img:hover{

box-shadow:inset 260px 0px 1px #FE2E64,

inset -260px 0px 1px #F9B7FF;}

Espero que les gusten todos efectos,y que le den buen uso^^

Pues eso seria todo,espero poder dejarle una entrada mas entretenida la proxima vez~!

Recuerda dejar tu comentario~

Les dejo besos de cherryT.O.P

Att:Lee rae mi{dayi}