Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Efecto hover "Grungy Photo" en tus imágenes con Css




Hoy quiero mostraros una demostración, de un efecto hover espectacular con Css, y se trata de generar un efecto hover, al pasar el cursor por la imagen, creará un efecto grunge o efecto sucio. A continuación, quiero que veáis la imagen que hay abajo, para que visualicéis de lo que hablo y escribo, espero que os guste este maravilloso efecto con Css y que lo apliquéis en vuestra web o blog, si os gusta:




Para añadirlo en una imagen copia y pega cada vez que lo quieras usar:

<style>
.grunge {
  background: url("http://lorempixel.com/output/technics-q-c-600-360-4.jpg");
  width: 600px; height: 360px;
  margin: 50px;
  -webkit-box-shadow: inset 0 0 20px black;
     -moz-box-shadow: inset 0 0 20px black;
          box-shadow: inset 0 0 20px black;
}
 
.grunge:hover {
  background: url("http://4.bp.blogspot.com/-Y9vEC7izF48/UY7CmRuW6PI/AAAAAAAANag/IGzD1qzBs3w/s320/imagetreatments-texture3.png"), url("http://lorempixel.com/output/technics-q-c-600-360-4.jpg");
}
</style>

<div class="grunge">
</div>


Aizum Blog, domingo, mayo 12, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9