>

IMAGÉNES CON EFECTOS (SÍ OTRA TANDA)

Son efectos que se ven al pasar el ratón por encima. Para poder colocarlos deberemos irnos a la edición html de la entrada y copiar los códigos:








EFECTO GRUNGE
Extraído de http://www.aizumblog.com/

<style>
.grunge {
  background: url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
  width: 350px; height: 600px;
  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("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
}
</style>

EFECTO CRISTAL ROTO

<style>
.cristalroto {
  background: url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
  width: 350px; height: 600px;
  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;
}

.cristalroto:hover {
  background: url("https://dl.dropboxusercontent.com/u/26040166/efectocristalroto.png"), url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
}
</style>

EFECTO GOTAS DE LLUVIA

<style>
.gotas {
  background: url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
  width: 350px; height: 600px;
  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;
}

.gotas:hover {
  background: url("https://dl.dropboxusercontent.com/u/26040166/53b9c7e48b1f.png"), url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
}
</style>

Entradas que pueden interesarte

No hay comentarios