/* Imágenes Vintage
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
border-radius: 10px;
position: relative;
float: left; /* Cambiar por right si quieres que las imágenes se alineen a la derecha */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0, 0.5); /* rojo */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_YqsbZdJNn7jab63WSVHZqxoTG0kKossHOS2pvF1o0lVW0mJYP-U9NkIwnYfRo7Ag1dinkmU4ec9jMYhQ797RkKEPxfb9Zt-3IiTRZDRApinfSY4O-ial-tqW-DoScbmgugWx70Givk/s0/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px rgba(0,0,0, 0.5), inset 0 0 50px rgba(0,0,0, 0.5), inset 0 0 50px rgba(0,0,0, 0.5);
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
}
<button><a href="#">Y Aqui tenemos el Html</a></button><br />
<div class="vintage">
<img border="0" src="URL de la imagen" /></div>
<div style="clear: both;"/>
<div class="vintage">
<img border="0" src="URL de la imagen" /></div>
<div style="clear: both;"/>
Agrega la URL de la imagen donde se indica y listo.
Si quisieras que el texto de la entrada rodee la imagen entonces elimina la etiqueta en color azul.
En el primer código verás en negrita la línea que corresponde al color de la imagen, puedes modificarla por algún otro color, estos son algunos ejemplos de lo tradicional en vintage:
background-color: rgba(0,0,255, 0.5); /* azul */
background-color: rgba(0,255,255, 0.5); /* aqua */
background-color: rgba(0,255,0, 0.5); /* verde */
background-color: rgba(255,0,240, 0.5); /* violeta */
background-color: rgba(255,102,0, 0.6); /* sepia */
background-color: rgba(0,0,0, 0.6); /* colores más oscuros */
Si quisieras que la imagen permanezca siempre así sin que regrese a su estado original al pasar el cursor entonces elimina esta perte del primer código:
.vintage:hover:before {
background: none;
box-shadow:none;
}
Y eso es todo, con este pequeño experimento podrás tener tus imágenes al estilo vintage usando sólo CSS.
