Lindo efecto vintage en imagenes css

jO jo jO feliz casi caaaaaasi navidad xD aun falta bastantes dias, pero, ya se empieza a sentir el espiritu navideno por todas partes :D!! me encantan estas fechas!!

En esta ocasion mis blogueras les traigo un tuto que encontre en una pagina ya conocida (al final del post pongo la referencia) pero que le puse mi toque kawaii como siempre jajajja, la verdad le da un efecto bastante mono a sus imagenes ^^

Primer Efecto:

(pasar cursor)

.cute_vintage {padding:0;float:left;} .cute_vintage { border:3px solid #FFEAF0;position: relative;float: left; margin-right: 20px;margin-bottom: 20px;} .cute_vintage:before {content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0; right: 0;background-color: rgba();background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEo7Bwgmn9gEYRhH4P6wPxprnq7DyMIw_NrmV7kRnUUUUcCyDiJLnR59-o6JU6iIACnuQo8J6QpkMpv8yTQXYnKVnUu2F9NxOzytIkdbfuExVpyKizw677ipmR1btXUBBv-yzc00Mzgpk/s0/grunge.png);background-size: cover;box-shadow: inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}.cute_vintage:hover:before {background: none;box-shadow:none;-moz-transition: all 1s; -webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}

Segundo Efecto

(pasar cursor)

.efecto_vintage {padding:0;float:left;} .efecto_vintage {border:3px solid #FFEAF0; position: relative;float: left; margin-right: 20px; margin-bottom: 20px;} .efecto_vintage:before { content: "";display: block;position: absolute;top: 0; bottom: 0;left: 0;right: 0;background-color: rgba(); background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/star9.png); background-size: cover;box-shadow: inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0, inset 0 0 50px #FFEAF0; -moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s; transition: all .1s;} .efecto_vintage:hover:before { background: none;box-shadow:none;-moz-transition: all 1s;-webkit-transition: all 1s; -o-transition: all 1s;transition: all .1s;}

Tercer Efecto: (pasar cursor)

.vintage_cute {padding:0;float:left;}
.vintage_cute {
border:3px solid #FFEAF0;position: relative;float: left; 
margin-right: 20px;margin-bottom: 20px;}
.vintage_cute:before {
content: "";display: block;position: absolute;
top: 0;bottom: 0;left: 0;right: 0;background-color: rgba();
background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/star1.png);
background-size: cover;box-shadow: inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;
transition: all .1s;}
.vintage_cute:hover:before {
background: none;box-shadow:none;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}

Cuarto Efecto:
(pasar cursor)

.vintage_efect {
padding:0;float:left;}
.vintage_efect {
border:3px solid #FFEAF0;position: relative;float: left; margin-right: 20px;margin-bottom: 20px;}
.vintage_efect:before {
content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba();
background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/2-2.png);
background-size: cover;box-shadow: inset 0 0 50px #FFFFFF, inset 0 0 50px #FFFFFF, inset 0 0 50px #FFFFFF;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}
.vintage_efect:hover:before {
background: none;box-shadow:none;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}

Quinto Efecto:
(pasar cursor)

.vintage_heart {padding:0;float:left;}
.vintage_heart {border:3px solid #FFEAF0;
position: relative;float: left; margin-right: 20px;
margin-bottom: 20px;}
.vintage_heart:before {content: "";display: block;
position: absolute;top: 0;bottom: 0;left: 0;right: 0;
background-color: rgba();background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/star7-1.png);
background-size: cover;box-shadow: inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4, inset 0 0 50px #FFEEF4;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;
transition: all .1s;}
.vintage_heart:hover:before {background: none;box-shadow:none;-moz-transition: all 1s;
-webkit-transition: all 1s;-o-transition: all 1s;transition: all .1s;}

 Para poner el efecto que mas te gusto ve a Plantilla >> Edicion HTML y pegar el codigo justo antes de  ]]></b:skin>  por ultimo das vista previa y guardas :)!

Notita: AL poner el codigo automaticamente el efecto se vera en TODAS tus imagenes que tienes en tu blog.. Si quieres que el efecto solo se vea en una imagen, osea, la que tu  prefieras (asi como lo hago yo en los ejemplos de arriba) copia y pega este codigo en la entrada donde quieras mostrar la imagen:

<div class="cute_vintage">
<img border="0" src="URL DE TU IMAGEN" /></div>
<div style="clear: both;"/>

Lo que esta señalado con rojo lo tienes que remplazar por el nombre del efecto que te gusto. Y te preguntaras..cual es el nombre de los efectos? jajaj bueno aqui abajito te pongo el nombre.

Primer efecto --- cute_vintage
Segundo efecto - efecto_vintage
Tercer Efecto --- vintage_cute
Cuarto Efecto --- vintage_efect
Quinto Efecto --- vintage_heart

Credito (x)